<style>태그와 CSS 코드

●해당 CSS 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다.

<style>

 

이 코드는 html 코드이지만, 이 안에서 사용되는 코드는

CSS코드이다.

 

font-size

 

폰트 사이즈를 설정해준다.

 

;

세미콜론이다.

CSS에서 하나의 서술을 마무리 할 때 저렇게 표시하고,

다음 서술과 잘 구분하기 위해 ; 다음에 띄어쓰기를 하는 것이 좋다.

 

 

px

 

픽셀이란 단위이다.

 

1. 박스모델

 

1-1 border

둘러싸는 칸을 만들 때 사용한다.

ex) {border:1px solid red;}

여기서 솔리드는 테두리의 색깔을 나타낸다.

 

 

1-2 solid

 

단선 테두리의 색깔을 나타내는 속성

 

1-3 dotted

 

점선으로 표시할 때 나타낸다.

 

1-4 padding

 

테두리와 글씨(컨텐츠) 사이에 간격을 조절해주는 속성이다.

px로 사용한다.

 

1-5 margin

 

간격을 설정할 수 있다.

컨텐츠 테두리끼리 서로 떨어져있는 거리를 설정할 수 있는 속성이다

위 아래 왼쪽 오른쪽으로 사방으로 떨어진다.

 

 

1-6 height

 

글씨의 세로 크기를 설정해주는 속성이다.

 

1-7 width

 

글씨의 가로 크기를 설정해주는 속성이다.

 

1-8 border 낱개로 사용하기

 

아랫줄만 사용하고 싶으면

border-bottom

위의 줄만 사용하고 싶으면,

border-top

왼쪽 줄만 사용하고 싶으면,

border-left

오른쪽 줄만 사용하고 싶으면,

border-right

잘 활용하자.

 

float

 

두 개의 컨텐츠가 나란히 화면에 배치되게 하는 기능이다.

html에서 이미지 태그를 사용했을 때,

이미지에 대한 스타일 태그를 작성 했을 때,

글자와 이미지를 보기좋게 배치 시키기 위한 속성이다.

사용은 간단하다.

float:left 라고 쓰면, 이미지는 왼쪽으로 붙고 글씨들도 그 옆으로 붙는다.

그 반대로, right라고 쓰면 이미지는 오른쪽으로 붙고 글씨들도 그 옆으로 붙는다.

 

list-style none

 

리스트 스타일을 없애는 속성이다.

 

text-decoration:underline;

 

밑줄을 그을 수 있는 스타일 태그에서 사용할 수 있는 속성이다.