반응형

태그 선택자

: <body> 태그에서 사용된 태그를 이용해 style 적용

태그 선택자를 사용하면 해당 html 모든 태그에 적용이된다.

 

아이디 선택자

: <body> 태그안에서 요소를 사용할 때 id 속성을 설정하고

<style> 태그에서 #id이름{} 형식으로 적용

아이디는 유일한 이름을 가지고 있다. 유일한 식별자

 

클래스 선택자

: <body> 태그안에서 요소를 사용할 때 class 속성을 설정하고

<style> 태그에서 .class이름{} 형식으로 적용

클래스 선택자는 아이디선택자와 달리 여러 태그에 같은 이름의 class를 설정하고 동시에 적용할 수 있다.

 

전체 선택자

*  {}

 

하위 선택자

<style> 태그에서 css 작성 시 선택자 이름을 지정할 때 하위 선택자로 지정하는 방법이 있다.

하위 선택자는 띄어쓰기로 지정 가능하다.

<style>
#main h2 { 
    color:blue;
}
</style>
<body>
    <div id="main">
        <h2> 안녕 </h2>
    </div>
</body>

 

위 코드의 <style> 태그 내용은 "main"이라는 이름을 가진 아이디 하위에<h2> 태그를 선택자로 지정해 스타일을 적용한 것이다.

 

그룹 선택자

, 를 이용해 두 개 이상의 선택자를 한 번에 스타일 적용이 가능하다.

h2, #main h3 { color:blue; }

 

 

반응형

'STUDY > HTML' 카테고리의 다른 글

[HTML] 반응형 화면 만들기  (0) 2025.05.16
[HTML/CSS] CSS 박스모델  (0) 2025.05.14
[HTML/CSS] CSS 속성  (0) 2025.05.14
[HTML] <input> 입력, 선택, 버튼  (0) 2025.04.30
[HTML] 경로이동 <a>  (0) 2025.04.25
반응형

마진(margin) - 경계선(border) - 패딩(padding) - html 요소

margin: 60px;
border: 경계선종류 선의굵기px 선의색상;
padding: 60px;

 

세 속성 모두 top, bottom, left, right 속성을 각각 설정 할 수 있다.

border-top: solid 1px red;
border-bottom: double 1px green;
border-left: solid 1px blue;
border-right: solid 1px pink;

 

margin

마진 초기화 

<style>
* { margin: 0; }
</style>

-> * (모든요소) 마진을 0 으로 설정

 

마진(margin), 패딩{padding) 속성

margin:20px;
margin:10px 20px 30px 40px;
margin: 20px 10px;

 

  • 속성을 따로 하지 않고 px 하나만 입력시 한 번에 설정하면 네 방향 모두 같은 값이 적용된다.
  • 속성을 따로 하지 않고 4개의 px 입력시 top-right-bottom-left 순서로 적용된다.
  • 속성을 따로 하지 않고 2개의 px 입력시 앞px은 상하단, 두번째 px은 좌우측 픽셀로 지정한다.

박스를 중앙에 배치하는 css 코드

margin: 0 auto;
  • 위 같이 0 auto 는 상하는 0, 좌우측은 자동으로 가운데로 배치

 

border

경계선 종류

  • solid : 실선
  • dotted : 점선
  • dashed : 파선
  • double : 이중

 

둥근 모서리 : border-radius

border-radius: 10px;
  • 숫자가 커질수록 더 둥글게

 

박스 그림자 : box-shadow

box-shadow : 5px 5px 10px 색상

순서대로

  • 박스의 우측방향 크기
  • 박스의 아래방향 크기
  • 그림자의 흐림 정도
  • 박스 그림자의 색상
반응형

'STUDY > HTML' 카테고리의 다른 글

[HTML] 반응형 화면 만들기  (0) 2025.05.16
[HTML/CSS] CSS 선택자  (0) 2025.05.14
[HTML/CSS] CSS 속성  (0) 2025.05.14
[HTML] <input> 입력, 선택, 버튼  (0) 2025.04.30
[HTML] 경로이동 <a>  (0) 2025.04.25
반응형

CSS 기본 구조

  • css 는 기본적으로 head 태그 안에 <style> 태그를 생성에 그 안에서 실행
  • <body> 태그에서 작성한 태그, id, name 등을 활용해 스타일 내용을 입력
  • 주석 : /* 주석내용 */
<!DOC
<head>
<meta charset="utf-8">
<style>
p {
    color:green;
}
</style>
</head>
<body>
	<p> 안녕하세요 </p>
</body>

 

CSS 의 속성

 

글자 색상 : color

color:색상이름;
  • 색상 이름 ( red, green, pink 등) 을 입력해도 되고 색상 코드(#ffffff) 를 입력해도 됨

 

글자 크기 변경 : font-size

font-size:숫자px;
  • 기본 : 16px

 

글꼴 설정 : font-family

font-femily:'글꼴 이름';
  • 글꼴 이름은 ' ' (작은 따옴표) 안에 적으며, '돋움', '굴림', 맑은고딕', '바탕' 등 사용 가능한 글꼴 이름을 적용하면 됨.

 

글자 스타일 설정 : font-weight

font-weight:bold;
  • normal : 기본 글자 (<h1>, <h2> 태그처럼 기본 설정이 두꺼운 글씨를 기본 두께로 바꾸는데 사용)
  • bold : 글자 볼드체 (두껍게)
  • italic : 글자 이탤릭체 (기우러지게)
  • underline : 글자에 밑줄

 

글자 정렬 : text-align

text-align:center;
  • left (왼쪽, 기본), center(가운데), right(오른쪽)

 

줄간격 설정 : line-height

line-height:150%
  • 기본 줄 간격 : 150%
  • 줄간격을 늘리면 상하 줄 간격이 늘어남

 

글자 그림자 : text-shadow

text-shadow:숫자px 숫자px 숫자px 색상이름

오른쪽부터 순서대로

  • 오른쪽 그림자 길이 (값이 커질수록 글자와 그림자가 멀어진다.)
  • 아래쪽 그림자 길이 (값이 커질수록 글자와 그림자가 멀어진다.)
  • 흐린 정도 (값이 커질수록 그림자가 더 흐려진다.)
  • 그림자 색상 (그림자의 색상만 적용)

으로 구성

 

링크 글자 : a 태그 활용

a:link { color:green; text-decoration: none;}
a:visited { color:green; text-decoration: none; }
a:hover { color:red; text-decoration: underline; }
a:active { color:gray; text-decoration: underline; }
  • a:link : 처음 초기 글자 상태
  • a:visited : 한 번 클릭 후 글자 상태
  • a:hover : 마우스를 글자 위에 올렸을 때의 상태
  • a:active : 클릭 당시의 상태

text-decaration : 링크에 밑줄 여부 결정하는 속성

 

배경 색상 설정 : background-color

background-color:색상이름;

 

 

배경 이미지 : background-image

background-image:url("./img/img1.png");

 -> 기본적으로 배경이미지는 반복됨

 

배경이미지 반복 설정 속성 : background-repeat

 background-repeat : no repeat;
 background-positoiin: right top;
  • no repeat : 반복되지 않음
  • repeat-x : 수평방향으로 반복
  • repeat-y : 수직방향으로 반복

backgroud-position 속성 값

  • left top
  • center top
  • right top
  • left center
  • center center
  • right center
  • left bottom
  • center bottom
  • right bottom

<il> 태그, list 관련 태그에 적용되는 css 속성

list-style-type:none; => 리스트 앞에 동그란 표시 없애는 코드

 

table 태그 꾸미는 css 속성

 

  • boder-collapse: collapse; => 기본 이중선으로 나오는 테이블 구조를 단일 경계선으로 바꾸기
  • table, th, td { border: solid 1px #cccccc; } => 테이블의 테두리, 행과 열의 경계선 설정
  • table {border-top: solid 2px green; } => 테이블 상단에 색상이 있는 줄 표시로 하나의 테이블 시작 표시
  • th { padding: 10px; background-color:#eeeeee; } => 테이블 컬럼명 (가장 윗줄)의 속성
  • td { padding: 10px; text-align : center; } => 값들의 글자 모두 가운데 정렬
  • width, height : 너비, 높이 설정

 

display 속성 : 글자의 자리를 부여

  • inline : 기본 구조로, 개행(enter)<br>을 설정하지 않는다면 개행 없이 각 태그 요소드리 가로 방향으로 나열된다.
  • block : 행 전체에 자리를 부여해서 글자가 행을 모두 사용하지 않아도 한 행을 해당 태그가 모두 차지한다.
  • inline-block : inline, block 두 특징을 모두 가지고 있음. 앞뒤 글자들과 가로 정렬이 되지만, 해당 요소만 block 속성 저ㄱ용됨.
  • none : 글자가 보이지 않음.

 

 

float 속성

: float는 공중에 뜨다 라는 뜻,

이 스타일을 적용한 요소를 공중에 띄우기 때문에 요소가 속한 상위 태그 밖에서 출력이된다.

(보통 아래에 배치된다.)

float:left;
float:right;
  • left : 왼쪽에 배치
  • right : 오른쪽에 배치

clear 속성

: 위에서 사용한 float 속성을 무력화하는 속성

  • 윗 요소에 float 속성이 적용된 상태에서 그 밑줄 요소에 clear 속성을 적용하면 float는 적용되지 않는다.
  • float가 적용된 요소는 따로 빠져나와 맨 아래에 배치가 되지만, 다음 요소에서 clear를 사용하면 다시 원래대로 돌아와 순서대로 배치된다.
<style>
h2 { float: left; }
p { clear: both; }
</style>
</head>
<body>
    <div>
        <h2> 윗줄에 올 글 내용 </h2>
        <p> 아랫줄에 올 글 내용 </p>
    </div>
</body>
  • clear : left;  이전에 사용된 float:left 기능 해제
  • clear : right;  이전에 사용된 float:right 기능 해제
  • clear : both; 이전에 사용된 모든 float 기능 해제

 

레이아웃 태그

<header> : 상단 헤더
<aside> : 사이드바 <section> : 메인콘텐츠
<footer> : 하단 푸터

 

<nav> : 메뉴 태그

<article> : section 태그 안에 작은 콘텐츠

 

 

 

 

 

반응형

'STUDY > HTML' 카테고리의 다른 글

[HTML/CSS] CSS 선택자  (0) 2025.05.14
[HTML/CSS] CSS 박스모델  (0) 2025.05.14
[HTML] <input> 입력, 선택, 버튼  (0) 2025.04.30
[HTML] 경로이동 <a>  (0) 2025.04.25
[HTML] 리스트 태그 (목록 태그) <ul>, <ol>, <li>, <dl>, <dt>, <dd>  (0) 2025.04.25

+ Recent posts

티스토리툴바