HTML에 대한 추가 세션이 열렸다.
CSS 요소에 대해 헷갈리는 부분이 많았는데, 확실히 세션을 참여하고 나니 개념이 머릿속에 잘 정리되었다.
위코드 2주차인 이번주의 목표는
"많은 html과 css를 사용하면서 Westargram을 구현하고, layouts 속성에 익숙해지기"다.
HTML, CSS 는 같은 화면을 다양한 property로 구현할 수 있기 때문에, 어떤 코드가 더 좋은지 고민을 해봐야 한다.
그러나 css 어린이 단계부터 좋은 코드를 알기는 어려우니, 이런저런 속성을 계속 사용해보면서
그래도 이것저것 해보면서 시간이 지나야, 어떤 코드가 더 좋은 지 알 수 있으니, 좋은 코드를 익혀 나가는 것이 좋다.
실제 적용이 중요하니, 개념이 완벽하지 않아도 일단 시작해보자.
용어의 중요성
- css를 설명하려면 어렵다.
- 용어정리는 원래 잘 되지 않으니까, 개발하면서 익숙해지도록 하자.
[HTML]
-
html: 웹 화면의 구조와 구성을 잡는 것이다.
-
tag: <태그 attribute> contents</태그> 이 한 줄이 element이다.
-
코드를 설명할 때 적당한 용어를 사용하는 게 훨씬 좋다. img 태크는 alt 속성을 꼭 써줘야 한다.
-
html에는 다양한 태그가 있는데, 내가 구현하고 싶은 화면이 구현된다면 어떤 태그를 사용하던 괜찮다. 익숙해지면서 semantic하게 짜도록 연습하자.
-
text-indent는 잘 사용하지 않는다. 대신 margin, padding 값으로 조정한다.
-
box-sizing: border-box 를 지정하지 않으면,
default 값인 content-box가 적용된다.
[westargram]
- 하나의 component를 크게 왼, 오로 나누고
- 왼, 오 중 하나의 component에 margin을 주는 것이 좋다.
- 각각 큰것부터 -> 작은것까지 componenets 로 나눠서 margin: 0, auto; 로 가운데 정렬하기.
- 이유가 있는 코드인지, 없는 코드인지 봐서 => 필요없을 경우 class, id 사용 남발하지 말기.
- block 요소에 width: 100% 같이 필요없는 속성 부여하지 않기.
“코드는 쓰는 경우보다, 읽히는 경우가 더 많다. ”
=> 잘 읽히는 코드인지를 염두해두고 코드 짜기.
[layout]
position
: relative => 원래 있어야 할 기준으로 있음 .
: fixed => view 기준으로 고정.
: absolute => 부모속성을 기준으로 고정됌. 부모 속성이 계속 없으면, body 태그를 기준으로 고정(이럴 땐 absolute를 쓸 이유가 없으니, fixed를 사용하면 된다.)
-
default 는 block일 경우 => 왼쪽 상단 꼭지점이 기준이다.
inline일 경우 = > 앞 content가 차지하고 남은 부분이 기준이다. -
view 는
<body>태그 사이의 contents이 보이는 부분이다. 즉, 우리가 웹 브라우저에서 볼 수 있는 화면 부분이다. -
layout은 계속 웹사이트의 요소 위치들을 보면서 감을 익혀가는 게 중요하다. 웹사이트를 볼 때 개발자답게 생각하도록 계속 연습하기!
-
float는 이제 잘 쓰이지 않고, 대신 flex가 자주 쓰인다.
[flex]
사용하는 이유
-
가로 정렬
자식요소를 가로로 정렬하고 싶을 때, 부모요소에 display: flex;를 준다. -
중앙 정렬
margin: auto; 는 안된다. 왜냐하면 margin-top, bottom은 auto 속성을 가질 수 없기 때문이다.
그렇기 때문에 top, right, bottom, left로부터 중앙정렬을 하고 싶을 때는 아래의 properties를 사용하는 것이 좋다.
- align-items: center;
- justify-content: center;
- display: flex; (to the parent tag)
