4일차에는 이전까지 배웠던 것을 바탕으로 코딩 챌린지를 실시했다.
label과 id를 사용하고, required 라는 attribute가 포함되고 password 타입의 input 태그에 최소 입력 글자수가 10개가 되개 해야하는 것이었다. 강의에있는 그대로 사용해서 어렵지 않게 작성할 수 있었다.
5일차
CSS 는 Cascading Style Sheet 이라는 뜻이다.
여기서 cascading이란 차례차례 쌓이는 것이라는 느낌으로 해석하면 된다.
이처럼 브라우저는 CSS를 읽을때 위에있는 코드부터 차례차례로 읽는다.
만일 두 CSS 가 하나의 태그를 가리키면?
두 코드중 어떤게 실제로 영향력이 클까?
Cascading, 즉 위에서부터 아래로 차례로 적용되기때문에 결국 맨 마지막에 있는 코드가 적용된다.
그렇다면 어떤 방법으로 CSS를 HTML에 추가(사용)할 수 있는가?
두가지 방법이 있다.
1. CSS를 사용할 HTML파일에 HTML코드와 CSS코드를 함께 둔다 (inline css)
<style>태그 안에 css를 작성해 웹사이트의 설정을 지정하는 <head>태그안에 둔다
2. CSS와 HTML을 분리한다 (external css)
CSS파일을 사용할 HTML과 분리하여 작성하고 HTML 파일의 <head>태그안에서 include하여 사용한다.
이때 사용 include하는 방법은
<link href = "styles.css" rel = "stylesheet"/>과 같이 사용한다. 여기서 href는 CSS파일이 존재하는 디렉토리 그 include 할 CSS파일의 이름이 들어가고
rel 이란 HTML 과 CSS 파일의 관계 (relation) 을 명시 한 것으로써 위의 코드의 경우 stylesheet이 되겠다.
CSS파일을 분리할 경우 다른 많은 HTML 파일에 사용할수 있다는 것이다 . 똑같은 스타일을 적용시키고 싶을때 또 코드를 작성하는 것이아니라 CSS파일을 가져다가 위의 방식처럼 include하여 쓰면된다. 또한 CSS 내용이 상당히 커졌을 경우 같은 HTML 파일에 작성하는 것은 비효율적이고 가독성이 떨어진다. 물론 같은 HTML 파일내에 inline으로 CSS를 작성하여 사용하는 경우, 예를들면 해당 HTML 파일에만 사용하거나 양이 적다면, 좋을 경우가 있겠지만 보통은 코드의 재사용성을 생각하면 분리하여 작성하는 게 좋다고 생각한다.
CSS는 스타일을 적용할 HTML 을 가리킬수 있어야하고 이 가리키는 것(pointer) 자체를 selector라고 한다.
이 selector를 통해 HTML을 가리키고 그에 실제로 적용시킬 스타일을 집어넣는데 이것을 property(속성) 이라고 한다.
이 selector에는 여러가지 종류가 있지만 이번 강의에서 알려준 것은
1. CSS를 적용시킬 태그 자체를 가리키는것
2. CSS를 적용시킬 태그에 id를 설정하여 그 id를 가리키는 것
3. CSS를 적용시킬 태그에 class를 설정하여 그 class를 가리키는 것
1. CSS를 적용시킬 태그 자체를 가리키는것
h1 { //h1라는 이름의 태그 자체를 가리키겠다.
font-size : 25px; //h1태그의 font-szie라는 property에 25px의 value를 적용시키겠다.
color : red;
}
2. CSS를 적용시킬 태그에 id를 설정하여 그 id를 가리키는 것
#h1 { //h1라는 이름의 id를 가진 태그를(들을) 가리키겠다. #만 추가해주면 된다.
font-size : 25px; //h1라는 이름의 id를 가진 태그의 font-szie라는 property에 25px의 value를 적용시키겠다.
color : red;
}
3. CSS를 적용시킬 태그에 class를 설정하여 그 class를 가리키는 것
.h1 { //h1라는 이름의 class를 가진 태그를(들을) 가리키겠다. #만 추가해주면 된다.
font-size : 25px; //h1라는 이름의 class를 가진 태그의 font-szie라는 property에 25px의 value를 적용시키겠다.
}
.redone {
color : red;
}
/*...*/
<div class = "h1 redone">this is red one</div>
HTML을 가리키는 selector 중 태그자체를 가리키는 것과 id로 가리키는 것이 있었다. 여기서 id는 고유 식별자로써 하나의 태그에는 하나의 id만 사용할 수 있다. 하나의 태그에 여러개의 스타일을 적용시키고 싶다면, 혹은 공통으로 사용하는 스타일을 사용하며 조금다른 스타일을 적용하고 싶다면 class를 사용할 수 있다. 이처럼 하나의 태그에 하나만 지정할 수있고 유일해야하는 id는 제약이 많기때문에 class를 많이 사용하게된다. 사용법은 가리키려는 class 이름앞에 .을 붙이면 된다. 위와 같이 사용하게 되면 this is red one이라는 요소에는 h1이라는 class와 redone이라는 class의 property가 동시에 적용되게 된다.
웹사이트는 box로 구성되어있다.
CSS에서 중요한 요소 라고 할 수있다.
block이라고도 부르며 가장 자주 사용하는 태그중 <div> 도 block이다.
이 <div> 는 옆에 아무것도 올수 없다. <div>는 말했듯이 box(block) 이기 때문이다.
inline과 다른 점으로 높이(height)와 너비(width)가 있다. 또한 inline은 padding을 property로 가질수 있지만 margin은 좌,우에만 적용된다. 왜냐하면 inline은 위해서 box와의 차이점으로 얘기했듯이 높이와 너비가 없기때문이다. 그 외로 다른점이 세가지가 있다.
1. box
1-1. margin
margin 은 box의 border(경계)의 바깥에 있는 공간이다.
margin 값이 하나면 사방에 적용, 두개면 수직, 수평, 네개면 상, 우, 하, 좌(시계방향) 로 적용된다.
1-2.collapsing margins
body 태그에는 기본적으로 브라우저가 margin 값을 설정한다
margin : 8로 설정이 되어있는데 만일 그 안의 자식인 div태그의 margin 값이 80이라면 body의 margin 값을 넘어선다. 하지만 margin 값은 이때 좌, 우로만 적용되고 상, 하로는 적용이되지 않는다.
이를 collapsing margins 라고한다. border가 동일하다면 두개의 margin은 동일시 취급된다. border가 만나면 margin 은 하나가 된다.
이를 해결하기위해 padding이라는 개념이 등장한다
1-3. padding
padding은 margin 과 반대되는 개념이다.
padding은 box의 border(경계)로 부터 안쪽에 있는 공간이다.
1-4. border
말그대로 box의 경계이다.
inline-block
inline을 block으로 인식할수 있다. 그렇기에 inline의 특성인 옆에 다른 요소가 있을수 있는 것과 block의 특성인 높이와 너비를 가질 수 있다.
하지만 inline-block은 old하고 많은 문제가 있다.
예를들어 기본값으로 주어지는 margin 값이 있다.
심지어 만일 box가 커지면 이 margin들은 미세하게 작아지기 까지한다.
이 값때문에 여러개의 inline-block을 property를 갖는 box를 사용한다면
마지막 box의 맨오른쪽 여백은 미세하게 맨왼쪽의 여백과 차이가 있을것이고
이것을 해결하기위해 각 box에 margin-right라는 속성을 설정할수 있겠지만
소수점 하나하나확인을 해봐야할것이고 이것은 너무나도 비효율 적이다.
또한 만일 노트북의 크기가 다르다면, 혹 창의 크기를 줄였다면,
만약 이런상황에서도 한줄안에 모든 box가 들어가야한다면 불가능하다.,
inline-block은 반응형 디자인을 지원하지 않는다.
이렇기에 flex-box가 등장했다.
flex-box
box를 어떤곳에든 둘수있다. 이름처럼 유연하다.
2d 레이아웃에서 아주 잘 작동한다. 이 flex-box를 사용할 때 알아야할 중요한 규칙 세가지가 있다.
첫번째 규칙
자식 엘리멘트에는 어떤것도 적지 말아야한다.
부모 엘리멘트에만 명시해야한다.
자식들을 움직이려면 부모에게만 말해주면된다.
body {
display : flex; // flex-box를 쓴다는 것을 알려준다.
}
/*...*/
<body>
<div>this is child</div>
</body>
위와 같이 <body> 태그는 <div> 태그의 부모가, <div> 태그는 <body> 태그의 자식이 된다. 자식인 <div> 태그를 flex하게 설정하려면 부모인 <body> 태그에만 어떻게 스타일을 적용시킬지 말해주어야 한다. 그리고 만일 자식 엘리멘트 안에 또다른 요소가있다면 그 자식엘리멘트는 그 요소에 대한 부모엘리멘트가 되고 규칙대로 flex-box가 될수 있다
두번째 규칙
주축(수평, main axis, 좌우로, row) : justify-content
flex-box에는 주축과 교차축이 있는 데, 이 주축(main-axis) 는 수평, 즉 좌우로 box들을 정렬 및 설정할 수 있다. 이 주축은 justify-content 라는 property로 설정할 수 있다.
세번째 규칙
교차축(수직, cross-axis, 상하로, column) : align-items
flex-box의 교차축(cross-axis)는 수직, 즉 상하로 box들을 정렬 및 설정할 수 있다. 이 교차축은 align-items 라는 property로 설정할 수 있다.
flex-direction
그런데 이 주축과 교차축을 바꿀 수 있다. flex-direction라는 property를 사용하면 된다. 이 flex-direction 은 기본값은 주축이 말했듯이 수평이기 때문에 수평이다. 하지만 flex-direction : column으로 설정한다면 이 주축과 교차축은 바뀌게되어, 교차축을 설정하는 align-items가 주축, 즉 수평의 방향을 담당하게 되고 반대로 원래 주축을 설정했던 justify-content가 교차축, 즉 수직의 뱡향을 담당하게 된다.
flex-wrap
flex-box에서 width를 설정했다면 그건 box들의 초기 사이즈로만 인식한다. 즉, 만약 창의 크기가 작아진다면 이 box들도 유동적으로 그 크기가 작아진다. 하지만 만약 box들의 크기가 유효하게 하려면 flex-wrap을 사용할 수 있다. 이 flex-wrap을 wrap으로 설정한다면 크기가 줄어들어도 box의 사이즈에는 영향이 없으며, 한줄을 벗어나 다음줄에 벗어나는 식으로 된다.
마지막으로 이 flex-box에 대해 더 공부하려면 css 마스터 클래스를 첵아웃해보자
'노마드코더 강의 > 코코아 클론' 카테고리의 다른 글
| [9일차] Media Query (0) | 2020.10.15 |
|---|---|
| [8일차-2] transition 과 animation (0) | 2020.10.06 |
| [8일차 - 1] state, pseudo element, color system, custom property (0) | 2020.10.06 |
| [8일차] position 과 pseudo selector (0) | 2020.10.05 |
| [1일차 ~ 3일차] 브라우저와 HTML (0) | 2020.09.30 |