시맨틱 태그 같은 태그들을 꽤 본 적이 있을 것이다. 이런 태그들을 시맨틱 태그라고 하는데, 여기서의 시맨틱(semantic)은 '의미론적인', '의미 있는' 같은 뜻들을 가지고 있다. 즉 시맨틱 태그 자체는 의미있는 태그라고 할 수 있다. 물론 id나 class같은 태그로도 표현할 수 있겠지만 의미 없는 div 태그를 많이 사용하게 된다. 왜 시맨틱 태그가 필요하게 되었느냐를 살펴보자. 🤔 가독성이 좋음 위와 같은 레이아웃을 모두 div 태그로만 짤수도 있다. (끝없는 div의 향연..) 다만 이렇게 짰을 때 HTML 파일 안에서 어떤 영역인지 바로바로 파악이 가능할까? 🤔 내가 짠 코드를 파악하기도 힘든데 유지보수에 좋을리가 없다. 웹 접근성에 좋음 시맨틱 태그로 마크업을 하면 브라우저가 HTML만 ..

포지션은 CSS에서 많이 사용하는 배치방법이다! 포지션을 이용하면 원하는 위치에 적절하게 배치를 할 수 있다. 간략하게 정리해보려 한다. static position 속성의 기본값. 요소를 문서 흐름에 따라 배치한다. relative 요소를 원래 위치를 기준으로 상대적으로 배치한다. top, right, bottom, left 속성으로 위치를 조정할 수 있다. absolute 절대 위치 지정 요소. 요소를 가장 가까운 부모 요소를 기준으로 배치한다. 문서의 흐름에 영향을 받지 않는다. 부모 요소 중에 position 속성이 static이 아닌 요소를 찾아 기준으로 삼는데, 만약 부모 요소가 없다면 body 요소를 기준으로 삼는다. top, right, bottom, left 속성으로 위치를 조정할 수 있..

부트스트랩이 버전을 업그레이드하며 이제 Sass(SCSS)로도 사용이 가능하다는 사실!... SCSS의 편리함을 잘 알기 때문에 설치해서 써보기로 했다. 👏 부트스트랩 패키지 설치 먼저 패키지 설치 전에 npm iniy -y로 package.json 생성하기! 이어서 부트스트랩 패키지를 설치해준다. npm install bootstrap@5.2.2 여기서는 진행하지 않았지만, 부트스트랩 아이콘까지 사용하고 싶다면 icons 패키지 추가 설치! npm install bootstrap-icons 디렉토리 세팅 scss 디렉토리를 만들어주고 main.scss에 bootstrap.scss를 import 해주기 vscode에서 빠른 설정을 위해 혹시 live Sass Compiler가 설치되어있지 않다면 요 확장..

mixin Scss에서는 믹스인이라는 문법이 있다. 반복적으로 재사용할 CSS 스타일을 하나의 함수처럼 지정해놓을 수 있다. 많은 mixin을 생성해도 호출하지 않으면 코드의 길이에 영향을 미치지 않는다는 점이 있다. 기본적으로 아래와 같이 정의할 수 있다. @mixin 믹스인이름(필요에 따라 변수지정도 가능){ 내용 } 호출은 include 키워드를 이용한다. @include 믹스인이름(지정했다면 변수사용 가능); 말줄임표 텍스트의 양이 공간보다 넘치는 경우 mixin으로 말줄임표('...')를 만들 수 있다. white-space는 자동 줄바꿈 여부에 관한 속성이다. nowrap으로 해제한다. overflow:hidden으로 넘치는 텍스트 양을 가리고 elipse로 대체한다. @mixin ellips..

Grid Garden CSS의 레이아웃을 지정하는 속성 중 하나인 Grid에 대해서 공부하게 되었다. Flex에 비해 2차원으로 속성을 나열할 수 있다는 것이 매력적인 것 같다. 아직 제대로 쓰기엔 헷갈리는 부분이 많아 연습할 수 있는 사이트가 있지 않을까 해서 찾아보았다. https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com 귀여운 그래픽의 사이트 발견~ 🤸‍♀️ 밭에 심겨진 당근에 물을 주거나 잡초를 없애는 스토리를 가지고 있다. 총 28단계! 예전에 Flex도 저 곳에서 연습했었는데 같은 시리즈 같다. (Flex는 연꽃 위의 개구리) Flex는 영어로 진행했었는데 친절하게도 한국어 ..