고정 헤더 영역
상세 컨텐츠
본문
재밌지만 어렵다 - 어렵지만 재밌다. 한 사이클을 도는 게 중요하다.
웹사이트를 만들 때 가장 먼저 할 일
- 폴더 만들기 (영문 위주로 진행, 한글 이름은 지양, 띄어쓰기 이름 역시 지양, 대소문자 역시 구분하는 편)
<!DOCTYPE html> 문서 버전을 이야기하는 것. 시작할 때 작성하는 Living standard 최신의 버전으로 코드를 작성하겠다는 이야기. 꼭 반드시 써야한다.
<html>, </html> / <body></body> = body elements
한 묶음을 elements 요소라고 부른다.
코드를 작성할 땐, 일관성을 지키는 것이 중요하다. 영어 원문에 익숙해지는 것이 중요하다.
html의 목적은 디자인적인 서식 반영이 아니기 때문에 아무리 수정해도 변화하는 것이 없다. 디자인적으로 꾸며주려면 css를 이용해야 한다. 다만 어느정도의 스타일링은 구조를 짜주면서 확인할 수 있다
<img src(attribute: 속성) = "">
<body>
<img src="./images/orange.png" />
<h1>Orange</h1>
<ul>
<li>Orange</li>
<li>Kiwi</li>
<li>Strawberry</li>
</ul>
</body>
./ 가 의미하는 바는 현재 이 파일이 위치한 경로에서 내부 파일을 불러올 때 사용한다.
<style>
h1 {
background-color: orange;
}
</style>
h1은 type selector(타입 선택자: h1이라는 type의 선택자)라고 부른다.
background-color는 property(속성 : css 상에서 부르는 이름)이라고 부른다.
(attribute는? html에서 부르는 것.)
* {} = universal selector(전체 선택자)
background-color: transparent;
initial value(초기값)
어떤 초기값을 가지고 있는지 관심갖는것. 기본 세팅되어 있는 값이 무엇인가? 굉장히 좋은 질문인 것.
inherited (상속)
박스 사이즈를 결정하는 개념
width
- 직계 부모가 제공해주는 콘텐츠 영역(containing block)의 너비 만큼 브라우저가 자동으로 계산해준다.
초기값: auto - 브라우저가 자동 계산해주는 값.
height
- 자식 높이 만큼 자동계산
이렇게 공부하라는 이유가 뭘까 궁금했는데, 이걸 이해하면 머리에 그림을 그리며 작업을 진행할 수 있겠다는 생각이 들었다. 또한 프론트엔드 개발자로 갈 것이면 논리적으로 접근해야 한다. (작동 원리가 궁금한 걸?)
'Project Log' 카테고리의 다른 글
| [1214 테킷] CSS :: Flex 정복하기 (0) | 2023.12.14 |
|---|---|
| [1213 테킷] (0) | 2023.12.14 |
| [테킷 1211] CSS (1) | 2023.12.11 |
| [테킷 1207] 특강, CSS (2) | 2023.12.08 |
| [테킷 1206] CSS box model (2) | 2023.12.07 |
