TIL LIST/HTML, CSS (13) 썸네일형 리스트형 [CSS] grid, 반응형 웹페이지 grid의 개념을 이해하는데 꽤 오래 걸렸다. 점점 약어가 많아지고 grid를 통해 반응형 웹페이지를 만들 수 있는 속성을 보자마자 머리 속이 백지가 되고 말았다. 많은 예제를 보고 clone coding 해보며 대충 감을 잡았다. grid 를 이용한 반응형 홈페이지는 크기를 결정하는 속성인 grid-template-columns, rows(grid-area로 줄일 수 있지만 r-s, c-s, r-e, c-e 라는 복잡한 값 때문에 쓰질 않으려 한다) 에서 특별한 값을 부여하고 브라우저에 맞춰 바뀌게 된다. 결과물 https://smthousand.github.io/2022_practice/02_grid-responsive/ 코드 리뷰 .main__container { padding: 0 80px; di.. [CSS] grid, 격자 grid는 그리드 컨테이너 내에서 격자로 나누어 레이아웃을 지정하는 CSS 문법이다. 쉽게 생각하자면 영역에 이런 격자가 있다. 좌측의 4 * 4 방식의 격자를 우측처럼 색칠하듯 영역을 지정해서 레이아웃을 선언할 수 있다. 각 격자의 비율은 1:1 비율이 아니라 자유롭게 변경이 가능하다. flex-box 와 비슷하지만, 좀 더 정교하게 사용할 수 있으니 익혀두고 특이한 레이아웃을 짤 때 쓰도록 해보자. 선언하는 방법은 flex-box 처럼 부모에 선언하고 자식에게 요소를 부여한다. .grid-container {display: grid;} /* dg */ 요소 grid-template-areas grid-template-areas CSS 속성은 명명된 격자 영역을 지정하고 격자에 셀을 설정하고 이름을 할.. [CSS] 좌측 정렬에서 마지막만 우측 정렬하는 법 div 내에서 정렬이 필요할 때, 보통 flex 를 이용해 정렬하곤 한다. 하지만 일부는 좌측 정렬, 일부는 우측 정렬이 필요할 때가 있다면? 위 내가 작업한 페이지에서 음악 리스트는 이미지와 설명은 왼쪽에, 생략 아이콘은 오른쪽에 붙어있는 것처럼. 코드 리뷰 Muse Plug In Baby .playlist__items { padding: 15px; border-radius: 20px; display: flex; justify-content: flex-start; align-items: center; } 처음엔 단순히 flex 를 이용해 좌측 정렬을 한 뒤 items__desc 부분 width에 고정값을 줄까 생각했었다. 하지만 요즘처럼 다양한 디바이스가 나오는 세상에 고정값은 있을 수 없는 일이다. .. [HTML] 이름 짓기 힘드시죠? 코드를 만지다 보면 쉽게 가로막히는 게 이름이다, 이름! 이름만 잘지어도 코드가 있어보이는데 😣 특히 HTML 은 뼈대를 작성하는 작업이기 때문에 더욱이 신중할 수 밖에 없다. CSS 에도 쓰이고 JavaScript 에서도 쓰이니 다시 html 파일을 열지 않게 이름을 지어야 한다. 그래서 이번에 진행한 마크업 챌린지는 최대한 시멘틱 태그, B.E.M, 그리고 약어 중심으로 작성하기로 했다. 참고 자료 MDN 시멘틱 태그: https://developer.mozilla.org/ko/docs/Glossary/Semantics B.E.M 공식 홈페이지: http://getbem.com/ 단어별 자주 쓰이는 약어: https://www.allacronyms.com/ 첫번째 섹션 The Greatest Albu.. 코코아톡 클론 코딩 완강 HTML과 CSS는 이미 경력도 있고 여러차례 프로젝트를 진행해보며 나름 전문성이 있다고 생각했으나 B.E.M이라던지 root의 변수 등 최신 문법에 대해선 무지했다. 그 영향인지 전 직장에서 코드에 대해 한 번 지적을 받은 기억이 있어 계획엔 없었으나 최대한 빠르게 프로젝트를 끝냈다. 기간은 강좌와 클로닝 타임을 포함해 약 일주일 정도 걸렸으며 아니나다를까 제일 약한 부분이었던 flexbox나 animation에 대해 좀 더 심층적으로 공부할 수 있었다. 하단의 내용은 클론을 진행하며 메모해둔 TIL의 내용이다. 추후에 한 번 더 MDN이나 구글링을 통해 예문을 확인해 보고 tistory에 메모할 생각이다. 하나는 이미 완성해두었으니 바닐라 JS 챌린지와 동시 진행이 가능하겠군. [결과물] https:.. 이전 1 2 다음
