coding/html + css 101
[sass/scss] 반복 스타일 한 번에 쓰기
css에서 스타일이 반복될 경우 한 번에 처리하는 법을 알려드릴게요. scss의 장점 중 하나죠! 1. @mixin @mixin 그룹이름{ 속성: 속성 값; } ① mixin - mixin은 반복적으로 쓰이는 스타일을 그룹화해서 사용할 수 있게 해 줍니다. - 변수와 비슷한데, 변수가 한 가지만 넣을 수 있다면 mixin은 여러 개를 넣을 수 있습니다. - [@mixin 그룹 이름{ 속성: 속성 값; }]으로 사용할 수 있습니다. 2. 예시 ① 사용이 필요한 곳 예시 - 위의 코드에서 체크한 것처럼 서로 다른 부분에서 동일한 스타일이 적용된 적이 있을 거예요. - 같이 적자니 선택자가 애매하고, 그렇다고 그냥 적자니 반복되어서 코드가 예쁘지 않아요. - 이렇게 한 번 정리해줄 만한 곳에 사용해주시면 됩니..
![[sass/scss] 반복 스타일 한 번에 쓰기](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbzWFH1%2Fbtrd03Xxkof%2FAAAAAAAAAAAAAAAAAAAAAP72iVpUQaGCXAnJXgVKoqg7RUJ7DD56mW1rt0w7C2so%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DIXFrdqqE1%252BC1Ir7oKXOJKPlR9O0%253D)
[sass/scss] 변수 사용법
scss의 가장 큰 장점은 css와는 달리 변수 선언이 가능하다는 점이 아닐까 싶어요. 변수만 가능해도 유지보수가 한결 수월해지죠. 1. 변수 선언 ① 변수 - 변수 선언 방법은 [$변수 명: 변수 값] 형태로 사용해주시면 됩니다. - 사용하실 때는 [$변수 명]을 적어주시면 된답니다. - 여기에서는 변수에 생상 값을 넣어주었어요. ① 변수 사용 - 위에서 언급했든 [$변수 명]을 적어주시면 사용 가능합니다. - 여기에서는 태그의 색상에 값을 넣어줬네요. 이렇게 원하는 곳에 적어주시면 됩니다. - 변수 명은 나중에 다른 사람이 읽어도 어떤 것인지 알 수 있게 되도록 쉽고 명료하게 적는 게 좋아요. 2. 변수의 범위 ① 전역 변수 - 변수가 적용되는 범위가 정해져 있습니다. - 지금처럼 전역 변수, 즉 어..
![[sass/scss] 변수 사용법](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fcz16q2%2FbtrdFmXY22g%2FAAAAAAAAAAAAAAAAAAAAADWRx5cfZTxDMoW863dVL_yWfhRqoToFjUfS2Guk--Wi%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DFCt0JUI%252BEvF3W%252FNBFBw7RHKGy7c%253D)
[css] 미디어쿼리 max-width 사용시 주의점
지난 포스팅에 이어서 max-width에 대해 주의해야 할 점을 몇 가지 적어보겠습니다. 1. 적용 영역 ① 최댓값 - 미디어쿼리에서 max-width를 설정한다는 것은 0부터 설정값까지 적용을 시키겠다고 하는것입니다. - 위 이미지의 값은 브라우저의 사이즈가 0~800px 일 때 적용한다는 뜻과 같습니다. - 결국 브라우저 사이즈가 1200px 일 때는 적용되지 않으니 이런 효과를 이용해 반응형 웹을 만드는 것입니다. 2. 겹치는 영역 ① 순서 - 이번엔 코드로 살펴봅시다. 설명대로라면 0~1000px 적용, 0~600px 적용되는 미디어 쿼리가 두 개 있죠. - 그런데 0~600px 영역은 겹치는 영역입니다. - 이럴 때는 아래에 있는 코드가 적용됨으로 작은 영역을 아래에 적어주시면 됩니다. 3. 기..
![[css] 미디어쿼리 max-width 사용시 주의점](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FG5MdR%2Fbtq9ME9qHAR%2FAAAAAAAAAAAAAAAAAAAAAIeUg2FtpCV8ZH62UMpSwVTW2VD8t4kzT_VwNIrNpUFE%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D2cS9ZtgNuZvEB%252BcG0kkose2pMTU%253D)
[css] 미디어쿼리로 반응형웹 제작하기
css에서 미디어 쿼리를 이용해 반응형 웹을 제어해볼게요. 1. html 반응형 ① html - 일단은 간단하게 html을 작성해봤어요. - 예시로 사용할 거라 간단하게 하나만 만들었습니다. - [! + Tab]을 누르면 html 기본 구조를 간단하게 불러올 수 있습니다. 자세한 사항은 아래에 링크로 달아둘게요. 2. pc 사이즈 css *{ margin:0; padding:0; } .reactive{ width:100%; height:300px; background:lightcoral; text-align: center; line-height: 300px; font-size: 24px; color:white; } ① 기본 css - pc 사이즈는 그냥 평소대로 코딩을 해줍니다. - 저는 보기 좋게 간단..
![[css] 미디어쿼리로 반응형웹 제작하기](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdqazpS%2Fbtq9kQpdcq6%2FAAAAAAAAAAAAAAAAAAAAAOf4OV_dCYAEfH6MXTzOvAS2Ncri-NWiPy60uvok3w74%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DRzU4yj8yVCLWbb1A0QlfvofdhHk%253D)
[css] 홈페이지 코딩 내비게이션 바 07 - 간격 조정
이제 마무리된 디자인에서 여백, 색 등을 조금씩 다듬어보겠습니다. 1. 내비게이션 바 메인 메뉴 ① 문제점 확인 내비게이션 바의 메뉴가 위쪽으로 딱 붙어서 답답한 느낌이 듭니다. 세로 기준으로 가운데쯤 왔으면 좋겠네요. #header{ line-height:60px; } ② line-height 이용 line-height는 줄 간격이지만 글이 한 줄만 있을 때는 가운데 위치로 만드는 게 아주 안성맞춤입니다. 값은 세로 값을 동일하게 넣어주세요. 2. 서브 메뉴 ① 문제 파악 줄 간격을 부모 태그에 입력해 서브도 적용되는 문제가 있네요. 배경색이 없어 눈에 잘 들어오지 않는다는 문제도 있습니다. 로고 카테고리 카테고리1 하위1 하위2 하위3 하위4 카테고리2 카테고리3 하위1 하위2 하위3 카테고리4 카테..
![[css] 홈페이지 코딩 내비게이션 바 07 - 간격 조정](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbCvobw%2FbtqZ3fCVICn%2FAAAAAAAAAAAAAAAAAAAAAJaK3aQ8DZwdlR9V8l7ONUp_a1TMeEIvEe9zkfFAYIUx%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D%252Bnn1oMhymcMTS0Ch81MrPX%252FxkD8%253D)