본문 바로가기

분류 전체보기114

[Sass 실습3] Bootstrap을 이용한 컬럼 레이아웃 만들기 (mixin, nesting 문법 이용) ▶ Bootstrap에서 쓰는 '컬럼' 클래스가 있다. class="row"라는 이름의 박스안에서 col을 사용하면 정확히 가로폭이 X등분 된다. ⭐ row는 전체를 12등분으로 나눔 [결과 화면] [HTML] 1 of 2 2 of 2 1 of 3 2 of 3 3 of 3 1 of 4 2 of 4 3 of 4 4 of 4 [SCSS] div { box-sizing: border-box; } @mixin column($너비비율) { float: left; width: $너비비율; padding: 15px; border: 1px solid gray; margin-top: 10px; background-color: lightgoldenrodyellow } .row { // Nesting 문법 .col-6 { .. 2023. 12. 14.
[Sass 실습2] extend, mixin 문법을 이용해 alert 박스 만들기 [결과 화면] [HTML] Well done! You successfully read this important alert message. Heads up! This alert needs your attention, but it's not super important. Warning! Better check yourself, you're not looking too good. [SCSS] // mixin, extend 이용 $초록 : #298F07; $파랑 : #0067A3; $노랑 : #FFD400; %btn { padding: 5px; margin: 5px; border: 2px solid black; border-radius: 10px; } @mixin 색깔($버튼색깔, $글씨색깔){ backgro.. 2023. 12. 13.
[Sass] @mixin 문법 사용 방법 ▶ 기본적으로 @extend와 비슷하나 @mixin을 이용하면 특정 요소만 바꿀 수 있다. 1. .scss파일에서 @mixin을 이용해 원하는 이름으로 작명하여 공통 코드를 작성한다. @mixin 작명() { 공통 코드 } ▶ 여기서 () 안에 특정한 요소를 $로 지정하면 나중에 코드에 넣을 때 $부분을 다르게 줄 수 있다. @mixin 색깔($버튼색깔){ background-color: $버튼색깔; } 2. @include을 이용해 1에서 만든 것을 이용하여 공통 코드 부분을 넣어준다. @inlcude 작명(); @include 색깔($초록); ▶ $는 여러개 사용가능하고 왼쪽에 넣을 수도 있다. 2023. 12. 13.
[Sass] @extend 문법 사용 방법 1. .scss파일에서 공통으로 작성할 코드를 임시클래스로 작성한다. %임시클래스명 { 공통 코드 작성 } %btn { margin: 5px; padding: 5px; border: 2px solid black; border-radius: 10px; color: black; } 2. extend 문법을 이용하여 공통 코드 넣기 @extends 임시클래스명; .red-btn { @extend %btn; background-color: red; } .blue-btn { @extend %btn; background-color: blue; } .yellow-btn { @extend %btn; background-color: yellow; } ▶ 임시클래스는 단독으로 컴파일 되지 않는다. ▶ @extend 뒤에 .. 2023. 12. 13.
[Sass 실습1] [Nesting 문법] Sass를 이용해 리스트 만들기 Q. 리스트 만들기 , 태그 등을 이용해 위 사진에 나온 리스트의 HTML과 CSS를 디자인해보세요. (조건1) 태그에 .active라는 클래스가 부여되면 배경이 저렇게 파란색으로 변해야합니다., 마우스를 올려놓으면 빨간색 배경으 (조건2) 셀렉터를 길게 나열하지 않고 Nesting 문법을 이용합니다. [결과화면] [마우스 올렸을 때] [HTML] tomo cerveza con Messi para vivir felizmente soy de Corea feliz navidad [SCSS] ul { li { list-style-type: none; padding: 10px; border: 1px solid gray; } .active { background-color: skyblue; color: white.. 2023. 12. 13.
[HTML/CSS] 크롬 개발자 도구를 이용한 오류 수정 / 알 수 없는 Padding 제거 가끔 padding, maring을 전혀 안 건드렸음에도 다음과 같이 왼쪽은 많이 남고 오른쪽은 조금 남는 등 안 맞는 경우가 자주 있다. 크롬으로 연 후에 f12키를 눌러 크롬 개발자 도구를 켜서 이를 해결할 수 있다. 개발자 도구를 켠 후 다음과 같이 어디에서 왼쪽 여백이 발생하는지 찾아본다. 보니까 ul에서 paddinf-inline-start로 40px만큼의 패딩이 들어가 있었다. 한눈에 보기 쉽게 이미지로 확인할 수도 있다. 따라서 ul에 padding을 0으로 주었더니 해결됐다. [완성] [HTML] tomo cerveza con Messi para vivir felizmente soy de Corea feliz navidad [SCSS] ul { li { list-style-type: non.. 2023. 12. 13.

티스토리툴바