CSS 3

[css layout]Flexbox와 Grid 어떤 레이아웃을 사용할까?

0. 들어가며... CSS 의 Flexbox와 grid는 웹 페이지의 레이아웃을 만드는 데 사용할 수 있는 (예시로, float와 비교해서) 비교적 최신 기술이다. (flexbox는 2012년등장, 2017년 10월 17일 Microsoft Edge 브라우저는 CSS Grid 구현을 출시 했다.) flexbox와 grid의 사용법에 대해 자세히 정리된 글들은 이미 많이 있으므로 둘을 비교하며 어떤상황에서 어떤 기술을 사용할지에 대한 고민을 담은 글이고, 이에 대해서는 정답은 없다고 생각한다. 혹시나 flexbox와 grid에 대해 아직 잘 모르겠다면, 제대로 공부해보고 싶다면 아래 사이트(1분코딩) 에 들어가서 천천히 익혀보기를 추천한다. (내가 도움을 많이 받은 사이트이다.) https://studio..

HTML & CSS 2023.05.17

[제로베이스] HTML/CSS미션을 마무리하다.

들어가며... 제로베이스 프론트엔드 스쿨(6개월 과정)을 시작한지 어느덧 6주차가 되며 5.10(수)요일 첫 번째 관문? 인 HTML/CSS 미션을 마무리하게 되었다. 결론부터 이야기 하면, HTML/CSS 미션을 수행하며 마크업 실력에 있어서 많이 성장 했음을 느낀다. 1. HTML/CSS를 공부하며(미션을 진행)하며 느낀점 제로베이스의 HTML/CSS 미션은 총 5개로, 구현해야할 피그마 디자인 파일과, 혼자 공부했으면 생각하지 못했을? 하지만 꼭 알아야할 요구사항들이 주어지고 , 디자인과 요구사항을 체크하며 구현해 나가는 과정이다. 나의 미션1의 진행 과정을 간단히 적어보겠다. 미션의 요구사항을 보고, 나 지금까지 무슨 공부 한거지? 라는 생각이 들었다. 다시 요구사항을 하나하나 검색해가며 HTML..

개발일기 2023.05.13

[CSS] 결합선택자 - 상속/ 형제

상속 1. 자손 결합자 ( 공백) 하위에 있는 태그, 자식 태그들로 범위를 좁혀서 선택한다. 2. 자식 결합자 (>) 바로 아래 자식만 좁혀서 선택한다. 형제 1. 일반 형제 결합자 (~) 내 뒤에 있는 형제를 선택한다. (여기서 형제 = 같은 레벨 을 말한다.) 2. 인접 형제 결합자(+) 바로 뒤에 있는 형제만 선택한다. 형제를 선택할때는 '순서'가 중요하다. [선택자1] ~ [선택자2] 선택자 1의 '뒤에'있는 선택자2를 선택한다. 다음 예시를 천천히 보면서 이해해보자. See the Pen Untitled by ITK-SHIN (@itk-shin) on CodePen. index.html Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello H..

HTML & CSS 2023.05.07