HTML,CSS,JS 3일차

font 속성

font-size : 글자크기

font-weight : 굵기 100~900 (보통700)

font-family : 글꼴

- 지정하려하는 폰트를 , 로 나열

- 한글 폰트를 지정시 한글이름, 영문이름을 같이 지정

- 기본폰트, 다른폰트, 기본형

- 마지막은 항상 기본형을 지정

- 폰트명을 띄어쓰기 없이 지정, 띄어쓰기가 있다면 " " 묶어설정

border 속성

border : 테두리 속성

border-width : 두께

border-style : 모양

border-color : 색

border-radius : 테두리 둥글게

border-??-radius : 위치지정가능

background 속성

bg-color : 배경색

bg-image : 배경이미지

배경색과 배경이미지를 같이 지정하면 배경이미지가 우선

이미지 사이즈에 출력되지 못하는 부분은 배경색이 채움.

bg-size : 배경이미지 크기

bg-repeat : 배경이미지 반복

- no repat : 반복안함

- repeat-x : x축으로만 반복 (가로)

- repeat-y : y축으로만 반복 (세로)

- round : 양쪽반복 (기본)

bg-position : 배경이미지 위치

- center : 가운데

- x,y 원하는 위치로 설정

background : color image position size repeat 순으로 입력

cursor 속성

cursor : 마우스 포인터 모양을 주는 속성

cursor : pointer; (손가락모양)

icon 속성

icon : 아이콘 이미지 제공 사이트를 링크로 연결

폰트구글 , 폰트어썸, 부트스트랩 ...

ex)

cdn 포함시키고 써야함.

<div>

</svg>

</div>

text 속성

text-align : 정렬 left, right, center, justify(양쪽)

text-indent : 들여쓰기

text-decoration : 선긋기

- none : 없음

- underline : 밑줄

- overline : 윗줄

- line-through : 가운데줄

text-shadow : 글자 그림자

- 좌측 px 상단 px 번짐정도px 색상

- 중첩가능(멀티가능) (, 콤마) 로 계속 이어나갈 수 있음.

letter-spacing : 글자간 간격

word-spacing : 단어간 간격

letter-height : 글자 기준선 높이

white-space : 컨텐츠 감싸기 방법

- wrap : 여러줄 만들기

- nowrap : 한줄로 처리

text-overflow : 텍스트가 범위를 넘어가는 경우 처리

- ellipsis : 넘어가는 부분의 단위를 ... 으로 처리

overflow : 요소가 넘어가면 어떻게 처리할지 결정

- hidden : 숨김

- scroll : 스크롤바 생성

- auto : 스크롤 오토 생성

css 표준단위

px : 픽셀

% : 퍼센트 현재값을 기준으로 %

em : 배수, 부모값을 기준으로 배수

rem: 배수, 문서의 값을 기준으로 배수

cm/mm/in => 각 단위

pt : 포인터 1pt => 1/72 in

pc : 피카소 1pc => 12pt

deg : 각도

box 속성

width : 가로길이

height : 세로길이

margin : box의 바깥여백

padding : box의 안쪽여백

box-sizing : box의 크기를 지정하는 속성

box-sizing에 따라 width가 컨텐츠의 크기가 될 수도 있고, 박스 전체의 크기가 될 수도 있음.

border-box => width = 컨텐츠의 가로 + padding + border

content-box => width = 컨텐츠의 가로

ex)

width = 100px padding = 5px border = 1px

border-box = 5 + 5 + 1 + 1 + 88 = 100 px 많이사용.

content-box = 5 + 5 + 1 + 1 + 100 = 112px

display속성

block : 한 라인을 차지하는 속성

- width / height 크기 조절 가능.

- 여백 조절가능 (margin, padding 둘다 가능.)

inline : 현재 라인에서 글자 크기만큼 컨텐츠를 가짐

- 크기조절 불가능 ( 컨텐츠의 크기만큼 자동설정)

- margin 불가능, padding 가능

inline-block : 현재 라인에서 글자 크기만큼 컨텐츠를 가짐.

- width / height 크기 조절 가능.

- 여백 조절가능 (margin, padding 둘다 가능.)

각 태그마다 기본속성을 가지고 있음.

display로 속성 변경 가능.

margin : border 뒤쪽 외부여백

padding : border 안쪽 내부여백

magin : 10px => 상하좌우 10px

magin : 10px 20px => 상하10px / 좌우 20px

magin : 10px 20px 30px => 상10px / 좌우 20px / 하 30px

magin : 10px 20px 30px 40px => 상10px / 우 20px / 하 30px / 좌 40px (시계방향)

float 속성

요소를 띄우는 속성

웹페이지에서 레이아웃들을 함께 배치할 목적으로 만든 속성

한 라인에서 요소를 각각 오른쪽 왼쪽에 배치 할 때 유용하게 쓰임

float 속성을 사용시 자식의 높이값을 부모가 인식 하지 못함

::after 가상요소를 사용하여 css상에 가상요소를 추가하여 부모로부터 한 요소를 인지하게 설정

요즘엔 flex를 더 많이 사용

ex)

<!DOCTYPE html>

<head>

<title>Document</title>

<!--

pbox 가로크기가 500px

자식 box 3개가 pbox 가로를 꽉 차게 동일한 크기로 구성

-->

<style>

.pbox{

width: 500px;

background-color: aqua;

}

.box{

/* 500px / 3 =166.6666 */

/* calc() : 값을 연산할 수 있음. 연산자와 피연산자는 반드시 띄워쓰기 */

height: 100px;

width: calc(100% / 3);

float: left;

/* border: 1px solid rgb(255, 255, 255); */

}

.pbox::after{

content: "";

clear: both;

display: block;

}

.box1{

background-color: aqua;

}

.box2{

background-color: blanchedalmond;

}

.box3{

background-color: brown;

}

</style>

</head>

<body>

</div>

</body>

</html>

position 속성

속성을 좀 더 유동적으로 사용할 수 있게 위치 값을 부여하는 속성

static : default

fixed : 화면의 특정 위치에 고정

sticky : 스크롤에 반응하여 특정 위치에 고정

relative : 상대위치 => 엘리먼츠(요소)들 끼리 위치값에 서로 영향을 줌.

absolute : 절대위치 => 엘리먼츠(요소)의 위치를 절대적인 위치로 설정

- 기준이 되는 엘리먼츠는 relative를 가지는 가장 가까운 조상

- 만약 가장 가까운 조상중 relative가 없다면 body 기준

ex)

<!DOCTYPE html>

<head>

<title>Document</title>

<!--

pbox 가로크기가 500px

자식 box 3개가 pbox 가로를 꽉 차게 동일한 크기로 구성

-->

<style>

.pbox{

width: 500px;

background-color: aqua;

}

.box{

/* 500px / 3 =166.6666 */

/* calc() : 값을 연산할 수 있음. 연산자와 피연산자는 반드시 띄워쓰기 */

height: 100px;

width: calc(100% / 3);

float: left;

/* border: 1px solid rgb(255, 255, 255); */

}

.pbox::after{

content: "";

clear: both;

display: block;

}

.box1{

background-color: aqua;

}

.box2{

background-color: blanchedalmond;

}

.box3{

background-color: brown;

}

</style>

</head>

<body>

</div>

</body>

</html>

'화면 수업 정리' 카테고리의 다른 글

HTML,CSS,JS 6일차 (0)	2024.08.01
HTML,CSS,JS 5일차 (0)	2024.07.31
HTML,CSS,JS 4일차 (0)	2024.07.30
HTML,CSS,JS 2일차 (1)	2024.07.26
HTML,CSS,JS 1일차 (0)	2024.07.25

shchan 님의 블로그

HTML,CSS,JS 3일차

'화면 수업 정리' 카테고리의 다른 글

티스토리툴바

HTML,CSS,JS 3일차

'화면 수업 정리' 카테고리의 다른 글

'화면 수업 정리' Related Articles

티스토리툴바