코딩7 [개발공부] HTML/CSS 독학하기 (6) [FINAL] Column with flexbox 지금까지 우리가 본 basic layout 의 box 들은 서로의 위 아래에 위치하고 있었다. 그런데 많은 경우에 우리는 단순히 위 아래 stack 이 아닌 옆으로 나열된 column 을 보고 싶을 수 있다. 그럴 때 사용하는 것이 flex 이다. display: flex; 를 스타일에 추가함으로써 child boxes 를 column 형식으로 나열할 수 있다. 다음 HTML 코드를 보자. columns div 의 child 로 세 개의 column div 들이 있다. Default 값으로는 처음 column div 아래에 다른 column div 가 오는 방식으로 layout 이 생성될 것이다. 이를 column 형식으로 만드려면 다름과 같은 CSS 코드를 사용하면 .. 2023. 7. 11. [개발공부] HTML/CSS 독학하기 (5) Basic layout Basic Layout 이라 함은 box 가 stack on another 인 상테를 말한다. 그저 박스가 쌓여있는 layout을 말하는데 지금까지 우리가 배운 것들을 활용하면 basic layout 의 webpage 를 만들 수 있다. 강의25에서도 실습을 한다. 크게 새로운 내용은 없고 몇가지만 추가해서 적겠다. Auto 만약 main 박스를 중간에 고정 시키고 싶을 때 어떻게 해야할까? 텍스트에 하던 것처럼 text-align: center; 같은게 있을까? 그렇지 않다. 박스를 위해선 margin 을 사용해야 한다. 결론부터 말하자면 다음 코드가 박스를 중간에 고정시켜줄 것이다. main { margin: 0 auto; } 위의 코드가 의미하는 바는 left, right m.. 2023. 7. 10. [개발공부] HTML/CSS 독학하기 (4) Box model / Intro 대부분의 element 들은 "block level" element 라고 한다. 그리고 다음과 같은 네가지 특성을 따른다. width of 100% of their parent height of 0 height grows to match the content stack one on top of the other 저번 블로그 마지막에 잠깐 본 친구들이 이 box level element 인 것 같다. 아직 이 친구들에 대한 디테일한 설명은 듣지 못했고 곧 바로 CSS 를 통해 위의 특성들을 확인한다. 다른 element selector 와 마찬가지로 tag 를 쓰고 { } 안에 스타일을 써주면 해당 태그에 스타일을 입힐 수 있다. e.g., header { backgroun.. 2023. 7. 9. [개발공부] HTML/CSS 독학하기 (3) Classes and IDs 저번에 마지막으로 잠깐 이야기를 하고 끝났었는데 오늘 배운 내용은 class와 id에 대한 내용이다. 각각의 태그 종류에 따라 스타일을 입히는 것을 넘어 자유롭게 스타일을 입힐 수 있게 해준다. 저번 시간에 Selector에 대해서 배웠다. CSS 를 적을 떄 해당 스타일이 어떤 태그에 관한 것인지를 나타내주는 것이 selector라고 했는데, 어떤 '태그'에 관한 selector는 'Element' selector라고 부른다. 따라서 엄밀히 말하면 저번 블로그에서 설명을 잘못 적었다고 할 수 있겠다. Selector 자체가 tag의 종류와 관계가 있는 것이 아니고 selector는 어떠한 값이든 그 스타일과 연결될 값이라고 보면 된다. 그리고 오늘의 주제인 Class sel.. 2023. 7. 8. 이전 1 2 다음
