CSS

[CSS] box-sizing 속성

box-sizing 속성은 요소의 width와 height를 계산하는 방법을 정할 수 있는 속성이다. div와 같은 박스 모델에서 width, height속성은 위의 그림에서 contents-box의 크기를 말한다. 하지만 화면에 그려질 때는 border, padding, contents-box가 크기가 다 더해져서 보여진다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 border나 padding을 고려해야하는데, 이를 일일이 고려하면서 그리기는 힘들다. box-sizing 속성을 사용해 이 방식을 바꾸는 것이 가능하다. content-box 기본적인 방법이다. div의 width를 100px로 설정하면 content-box의 width가 100px를 가지고, border크기가 1px이고, pad..

[TIL] blog 글 목록

보호되어 있는 글입니다.

[TIL] float 또는 inline-block으로 수평정렬

위의 화면과 같이 정렬하는 방법은 2가지가 있다. 1. float로 수평 정렬하기 2. inline-block으로 수평 정렬하기 1. float로 수평 정렬 float 속성은 요소들을 화면위에 띄우는 속성이다. float 속성으로 박스 두개를 왼쪽으로 정렬할 수 있다. HTML left-box right-box next-box float 속성으로 가로 정렬할 때 float 박스들을 싸매는 하나의 큰 div 박스를 만들고 폭을 지정해주는 게 좋다. CSS .left-box { float : left; background-color: dodgerblue; width: 50%; height: 200px; } .right-box { float: left; background-color: darkviolet; w..

[TIL] margin, padding

margin : 상하좌우 여백 padding: 상하좌우 안쪽 여백 margin margin 속성을 사용하면 요소 사이의 여백을 설정할 수 있다. 여백의 크기도 px 단위로 설정할 수 있다. margin 속성 또한 다양하게 표기 가능하다. Heading 1 4가지 방식이 존재한다. 1. 한꺼번에 지정하기 Heading 1 2. 4면이 모두 같을 때 지정하기 Heading 1 3. 위, 오른쪽&왼쪽, 아래 Heading 1 4. 위&아래 , 오른쪽&왼쪽 Heading 1 padding padding 속성을 사용하면 안쪽 여백을 설정할 수 있다. 여백의 크기도 px 단위로 설정할 수 있다. padding 속성 또한 다양하게 표기 가능하다. Heading 1 4가지 방식이 존재한다. 1. 한꺼번에 지정하기 시계..

[TIL] CSS Selector

CSS Selector 클래스와 아이디는 같아 보이지만 차이점이 존재한다. 1. 같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없다. 2. 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있다. 👉 즉, 한 요소는 클래스는 여러개 가질 수 있고, 아이디는 하나만 가질 수 있다. 1. 태그 셀렉터 (Type Selector) 지정된 태그명을 가지는 요소를 선택한다. css li { } 2. class 셀렉터 (Class Selector) class 속성 값을 지정하여 일치하는 요소를 선택한다. class 속성값은 중복이 가능하다. html Hello World! '.' 으로 해당 태그의 클래스의 이름으로 선택하는 것이 가능하다. cs..

[TIL] CSS 폰트와 구글 웹폰트

CSS 폰트 또한 기본 속성에서 다루려고 했지만, 생각보다 너무 많아서 새롭게 정리해보려고 한다.🙋‍ font 글자 관련 속성들을 지정 값의미기본값 font-style 글자 기울기 지정 normal font-weight 글자 두께 지정 normal font-size 글자 크기 지정 medium(16px) line-height 줄 높이(줄 간격) 지정 normal(Reset.css 적용시 1) font-family 글꼴(서체) 지정 운영체제(브러우저)에 따라 달라짐 font 사용법 font: 기울기 두께 크기 / 줄높이 글꼴; .box { font: itallic bold 20px / 1.5 "Arial", sans-serif; } ※ 단축 속성을 사용하려면 font-size와 font-family를 필수..

[TIL] 01. CSS Basic Attributes

CSS의 기본 속성을 정리해 보려고 한다. 😊😊 CSS 주석 /* 내용 */ text-align 텍스트의 위치를 left,right,center로 정렬할 수 있다. 👉``태그 내용물도 정렬이 가능하다. Heading 1 Heading 2 Heading 3 text-decoration text-decoration을 사용하면 텍스트를 몇 가지 방법으로 꾸밀 수 있다. Underline : 밑줄을 긋는 기능 Hello World! Overline : 글 위에 줄이 그어지는 기능 Hello World! Line-through : 줄이 글을 관통한다. Hello World! None :아무 줄도 없다. (디폴트 값) 꾸밈을 없애기 위해 주로 사용된다. html 구글 css .no-decoration { text-..