생활코딩 css 공부하기3

생활코딩에서 layout관련 css를 공부하였다.

2020.03.02

오늘은 생활코딩을 보며 layout관련 css를 공부했다.

레이아웃이란 구획을 나누고 적절히 배치하는 것을 의미한다.

inline방식과 blocklevel방식이 있다.

inline은 한줄에 여러개 표시될 수 있고 blocklevel은 한줄에 하나씩 밖에 못 온다.

태그마다 합리적으로 결정되어있다.

 

padding과 margin

padding은 테두리 안 간격을 조정한다.

margin은 다른 엘리멘트(태그)테두리간의 간격을 조정한다.

inline방식에서는 width와 height를 무시한다.

 

box

css에서 굉장히 중요한 주제이다.

태그의 부피감을 결정한다.

 

box-sizing

어떤 엘리먼트의 크기를 지정하는 일을 한다.

width는 값이 일정하다.

하지만 border값에 따라 크기가 커진다.

그럴때 box-sizing: border-box값을 쓰면 border값에 상관없이 크기가 같아진다.

 

margin collapsing

마진겹침

결론적으로 마진 값이 큰 것이 마진값이 된다.

 

margin-collapsing1

 

 

margin-collapsing2

부모 엘리먼트와 자식 엘리먼트에서 마진겹침현상이다.

부모 엘리먼트의 시각적요소가 투명상태가 된다면 자식과 부모중에 더 큰 마진값이 사용된다.

 

margin-collapsing3

이해가 안간다면 넘어가도 좋다.

 

position1

태그(엘리먼트)가 화면상에 어디에 위치할 것인가에 대한 방식과 관련된 굉장히 중요한 주제이다.

기본포시젼 상대포지션 절대포지션이 있다.

 

absolute position

어렵다.

상대적인 포지션의 부모엘리먼트가 나올때가지 위치를 잡는다.

 

fixed position

스크롤을 내려도 화면에 고정되어있다.

 

flex

궁국의 레이아웃 방식이다.

조금 어렵다.

다 어렵다고한다.

진짜 어렵다.

일단 크게 부모 자식 엘리먼트가 있어야한다.

 

 

holy grail layout

궁국의 레이아웃이다.

알고나면 편리하다.

 

적용

웬만한 곳에 다 쓰인다.

 

flex의 나머지 속성들을 알려주는 사이트

 

오늘의 메모장

2020.03.02
레이아웃
구획을 나누고 적절히 정보를 배치하는 것이다.

inline vs block level
html은 여러태그가 있는데 inline 태그와 block level element로 나눈다.
합리적으로 결정되어있다.
display를 사용하면 속성을 얼마든지 바꿀 수 있다.

box model
css에서 굉장히 중요한 주제이다.
자주 쓰인다.
태그의 부피감을 결정한다.
padding 을 설정하면 테두리 안 간격을 조정할 수 있다.
margin 다른 엘리먼트 테두리간의 간격을 조절할 수 있다.
inline방식에서는 width와 height를 무시한다.

box-sizing
어떤 엘리먼트의 크기를 지정하는 일이다.
width는 값은 일정하다 하지만 border 값에따라 크기가 커진다.
그럴때 box-sizing에 border-box값을 쓰면 border값에 상관없이 크기가 같아진다.
*{
    box-sizing: border-box;
  }
모든 태그에 같은 크기를 주는 코드를 자주 사용한다.

마짐겹침
고급주제이다.
css초심이면 그냥 지나치는것을 권장한다.
하지만 나는 할 것이다.
위에있는 태그와 아래있는태그중에 마진값이 더 큰것이 마진값이 된다.
좀 더 유용한 사례를 살펴 보았다.

마짐겹침2
부모 엘리먼트 자식 엘리먼트 마진겹침 현상을 살펴볼것이다.
부모태그가 시각적으로 아무것도 없는 투명한 상태가 되면 자식태그와 부모태그의 마진값이 더 큰쪽의 마진값이 사용된다.
찾아보면 이로운 점이 있을 것이다.

마진겹침3
empty의 시각적인 요소가 없어지면 nomal의 높이가 달라진다.
시작적인 요소가 없다면 위 아래의 마진값중에 더 큰값이 마진값이 된다.
이해가 안간다면 넘어가도 좋다.
이해가 되서 다행이다.

포지션
태그(엘리먼트)가 화면상에 어디에 위치할 것인가에 대한 방식과 관련된 굉장히 중요한 주제이다.
다소 어려울 수 있다.
각각의 엘리먼트는 고유의 값을 가지고있다.
기본포지션
postion: static; 위치와 관련된 선택을 하지 않은 상태이다. 
상대 포지션
바꾸러면 position: relative; 코드를 써야한다.
오프셋을 사용하며 위치를 이동시킬 수있다.
top이 우선 left가 우선이다.

절대포지션
html엘리먼트의 위치를 기준으로해서 자리가 잡힌다.
만약에 부모엘리멘트의 포지션값을 상대적으로 해놓으면 부모엘리먼트를 기준으로 자리를 잡는다.
부모엘리먼트가 포지션값이 스테틱이면 포지션값이 스테틱이 아닌 부모가 나올때까지 찾다가 자리를 잡는다.
relative는 부모엘리먼트를 기준으로해서자리가 잡힌다.
오프셋값을 없애면 부모위치기준으로 자리를 잡는다.
기본값은 원래있기로 기대되는곳의 값이다.
포지션을 엡솔루트로 하게되면 부모와 무관하게 된다.
그래서 자식태그는 크기는 컨텐츠만큼으로 변한다.

fixed
고정된 타입
스크롤을 내려도 화면에 고정되있다.
absolute와 비슷하다.
width와 height로 지정한다.
부모와 링크를 끊는다.

flex
layout의 흑역사
table
복잡하고 코드양이 많고 가독성이 떨어진다.
position
각각의 엘리먼트를 적당한 위치로 놓았다.
float
이미지 옆에 글씨가 흘러가듯한 효과를 준다.
이해하기가 어렵다.
flex
궁국의 레이아웃 방식이다.
알고나면 편한데 다양해서 다 아는 것을 이해하기 쉽지않고 결합했을때 효과를 이해해야한다.
사용하기 위해서는 container의 역할을 하는 태그와 item의 역할을 하는 태그들을 이해해야한다.
각자의 태그에 적용해야하는 속성들이 따로 있다.
자식과 부모가 있어야한다.

flex가 있으면 자식들의 범위가 달라진다.
display:flex;
    flex-direction: row;
기본값이다.
flex는 바깥쪽에있는 컨테이너의 디스플레이값을 flex로 줘야하고 기본적으로 하지않으면 row를 한것과 같다.
그리고 이값을 column으로 바꾸면 수직 방향으로 각각의 태그들이 정렬한다.

플럭스와 관련된 속성을 살펴본다.
flex-basis는 flex의 방향에 해당되는 엘리먼트크기를 지정하는 것이라고 보면된다.
flex-grow는 기본값이 0이다.
1로주면 각각의 엘리멘트가 container의 여백을 공평하게 나눠서 가득 채운다.
줄어들때도 숫자에 비례해서 줄어든다.
flex-shrink는 화면을 줄여도 엘리먼트의 크기는 줄어들지 않는다.

holy grail layout
궁극의 레이아웃이다.
가로로 표현하고 싶으면container에게 flex를 cloumn으로 바꾼다.
세로로 나누고 싶으면 container에게 flex를 cloumn으로 바꾼다.

flex의 기타 속성들
생활코딩의 flex가장 밑에 있는 영상 밑을 클릭하면 사용할 수 있다.
잘 이용하면 편할 것 같다.
굉장히 중요한 기능이다.
시간이 지날 수록 중요한 기능이다.

 

내일이나 모레쯤 css도 끝날 것 같다.

한번에 이해하기 힘들어서 여러번 봐야할 듯하다.

그리고 오늘 학교 과제가 있었다.

스마트디바이스 관련 조사하기였다.

생각보다 잘 발전되어있었다.

 

내일도 열심히 해야겠다.