Developer_Neo
[코드스테이츠 백엔드 2기(40기) SEB BE] 3일차 Daily 회고록 본문
오늘 나의 학습 목표는 무엇인가요?
HTML, CSS 기본에 대해 학습합니다.
오늘 학습할 내용 중에 이미 알고 있는 내용은 무엇인가요?
HTML과 CSS에대해 학습한 적이 있다.
HTML
- Hyper Text Markup Language
- HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어
<!DOCTYPE html>
<html lang="ko"> 태그
<head> 태그
<meta charset="UTF-8"> 태그...
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>- HTML은 Tag들의 집합이면서 웹 브라우저에서 우리 눈에 보여주는 구조를 제공한다.
- Tag : <>로 묶인 것이다.
1)태그
무언가를 표시/인식하기 위한 꼬리표
<h1> ~~~내용~~~ </h1> h1이 태그의 이름이다 내용만 브라우저에 노출된다
2)속성(attribute)
태그에 추가적으로 정보를 제공함 우리가 원하는대로 태그의 동작이나 표현을 조절할 수 있는 설정값이다
이름과 값으로 이루어져있으며 시작태그안에 선언 할 수 있다 태그이름뒤에 공백으로 구분하여 속성이름을 쓰고 뒤에 속성값을 쓰면 됨
하나의 태그에 여러개의 속성을 선언할 수 있다.
<h1 속성이름=“속성값”> ~~~내용~~~ </h1>
<h1 id=“title” class=“test”> ~~~내용~~~ </h1>
3)태그의 중첩
태그 안에 태그를 쓸 수 있음
<h1> ~~~ <i>내용~~~</i></h1>
4)빈 태그
닫는 태그랑 내용이 없는 것
빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지
않더라도 다른 용도로 사용되는 태그입니다.
빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우입니다.
<br> <img src="">
5)공백
한칸이상의 공백을 모두 무시한다
6)주석
시작은 <!-- 로 표시하고, --> 표시로 종료합니다.
많은 태그들이 있다. 혼자 학습을 하거나, http://www.tcpschool.com/html/intro 이 사이트를 이용해 차근차근 접해가도 된다.
CSS
- Cascading Style Sheets
- 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다.
문법
- 선택자(selector)와 선언부(declaratives)로 구성
선택자 {
선언부
}
선택자
- HTML 요소 선택자
- 아이디(id) 선택자
- 클래스(class) 선택자
- 그룹(group) 선택자
모든태그들을 선택하는 선택자 - *
type selector - selector에 태그이름을 작성하면됨
id selector - selector 에 #id이름작성하면됨
class selector - selector에 .을 이용해서 .클래스이름적어주면된다
스테이트 셀렉터 - 같은버튼이라도 마우스를 올렸을대 바꾸고 싶으면 하는법>> button:hover{~~~~}이다
자손 선택자
- 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택
ex) 모든 <div>태그의 하위 요소 중에서 <p>태그를 모두 선택
div p {스타일;}자식 선택자
- 해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택
ex) 모든 <div>태그의 바로 밑에 존재하는 하위 요소 중에서 <p>태그를 모두 선택
div > p {스타일;}
일반 동위 선택자
- 해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택
ex) 모든 <div>태그와 동위 관계에 있는 요소 중에서 <div>태그보다 뒤에 존재하는 <p>태그를 모두 선택하는 예제
div ~ p {스타일;}인접 동위 선택자
- 해당 요소와 동위 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택
ex) 모든 <div>태그와 동위 관계에 있는 요소 중에서 <div>태그의 바로 뒤에 존재하는 <p>태그를 모두 선택하는 예제
div + p {스타일;}
이외의 추가적인 내용은 http://www.tcpschool.com/css/intro 에서 찾아보면 되며, 이 사이트를 참고해 정리하였다.
오늘 학습 내용 중 새롭게 배운 내용은 무엇인가요?
- x
오늘 새롭게 학습한 내용을 다른 사람에게 설명할 수 있나요?
- 외우지는 못했지만 노력해봐야겠다
오늘 학습한 내용 중 아직 이해되지 않은 불확실한 내용은 무엇인가요?
- 각 태그들의 자식들이 여러개이고 자손들이 여러개일때 구분하는 것이 확실치 않다.
이해되지 않은, 불확실한 내용을 보완하기 위해서 나는 무엇을 할 수 있을까요?
- css관련 게임이나 직접 해보는 것을 통해 알아간다.
나의 오늘 학습 만족도는 몇 점인가요?
- 90점 (아는 내용들이라고 설렁설렁 넘어간 것들이 있는 것같다.)
'코드스테이츠' 카테고리의 다른 글
| [코드스테이츠 백엔드 2기(40기) SEB BE] 7일차 Daily 회고록 (0) | 2022.07.01 |
|---|---|
| [코드스테이츠 백엔드 2기(40기) SEB BE] 6일차 Daily 회고록 (0) | 2022.06.30 |
| [코드스테이츠 백엔드 2기(40기) SEB BE] 5일차 Daily 회고록 (0) | 2022.06.29 |
| [코드스테이츠 백엔드 2기(40기) SEB BE] 4일차 Daily 회고록 (0) | 2022.06.28 |
| [코드스테이츠 백엔드 2기(40기) SEB BE] 2일차 Daily 회고록 (0) | 2022.06.24 |
