Learn & Record
HTML CSS (CSS, CSS 지정 방식, 스타일시트, 아이디선택자, 스타일의 우선순위, 상위 하위 속성, block, inline, box, box 설정 요소) 본문
HTML CSS (CSS, CSS 지정 방식, 스타일시트, 아이디선택자, 스타일의 우선순위, 상위 하위 속성, block, inline, box, box 설정 요소)
Walker_ 2024. 3. 19. 16:391. CSS
- 각 요소들이 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어로,
- 홈페이지의 스타일 즉 디자인 요소를 담당
- 선택자(Selector) { 속성 : 값;}
- 스타일은 기본적으로는 마지막에 작성된 순서대로 표현되어짐
- 스타일 문법의 종류
- 외부 스타일 시트
- 외부에 작성된 CSS문서 즉 스타일 시트 파일을 연결하여 적용하는 방법
- 내부 스타일 시트
- <stlye> 태그를 사용하여 CSS 스타일을 적용하는 방법
- <head>
- <style>
- body { background-color: ligjtyellow; }
- </style>
- </head>
- 인라인 스타일(Inline style)
- HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법
- <h2 style = "color:green">
2. CSS 지정 방식
- 클래스 선택자
- 본문 (class='name') / 스타일(.name)
- 특정한 이름을 부여하여 선택하는 선택자로, html 화면 내에서 '하나의 이름으로 여러군데 여러번 사용가능'
- 주로 작은 요소, 작은 단락, 변화가 잦을 스타일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 지정 방식</title>
<style>
.de {
color : aquamarine;
}
</style>
</head>
<body>
<p class="de">
디지털 디자인 이란 ?<br>
우선 '디지털' 그리고 디지털 스토리텔링(Digital Storytelling)이란 말에 대해 생각해보자.
</p>
</body>
</html>
- 외부 스타일 시트 작성
- html 파일이 있는 디렉토리에 css라는 이름의 디렉토리를 생성
- css 디렉토리에 main.css 파일 생성
- html 파일의 <style> 태그 안의 부분을 복사해서 main.css에 붙여넣기
- > <style> 태그는 포함하지 않음
- html 파일의 <style> 태그 삭제
- <link> 태그로 css 파일을 연결
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 지정 방식</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<p class="de">
디지털 디자인 이란 ?<br>
우선 '디지털' 그리고 디지털 스토리텔링(Digital Storytelling)이란 말에 대해 생각해보자.
</p>
</body>
</html>
3. 스타일시트
- style 안에 작성하는 주석방법
/* style 안에 작성하는 주석방법 */
- 전체 선택자
- html내에 등장하는 모든 형태를 선택하는 선택자. (초기화, 기본 설정값)
- 가급적 사용안하는 것이 좋음
* {
margin: 0; /* 바깥여백 */
padding: 0; /* 안쪽여백 */
}
- 태그 선택자
- 특정한 태그 이름을 부여하여 선택하는 선택자로, html 화면 내에서 하나의 이름으로 한번만 사용권장
- 주로 큰 단락, 부모에서 사용
body {
background: #9999; /* 나중 속성이 적용됨 */
font-family: "돋움"; /* 기본 글꼴 돋움 */
font-size: 10px; /* 글자 크기 10px */
} body {
line-height: 30px; /* 줄 간격 30px */
}a {
text-decoration: none; /* a 속성을 가진 링크에 어떤 꾸밈도 하지 않음 */
color : yellow; /* 링크를 지정한 글자의 색상을 노락색으로 지정 */
}
- 클래스 선택자
- 본문(class="name")
- 특정한 이름을 부여하여 html 태그 안에 기입 가능
.color {
color : green;
}
</style>
</head>
<body>
<h4 class="color">Artwork Concept Drawing</h4>
<h1>아트웍 컨셉 드로잉</h1>
<p class="color">
편집 <a href="#">포트폴리오</a>에 포함될 수 있는 북커버 및 동화적 삽화 제작, 우베 포트폴리오에 포함될 수 없는 아트웍 실습,
3D 캐릭터 디자인이나 모션 그래픽에 사용할 수 있는 아트웍 표현에 대하여 학습합니다.
</p>
4. 아이디선택자
- 본문(id="name") / 스타일(#name)
- id 선택자도 클래스 선택자와 마찬가지로 특정 부분에 스타일을 적용할 때 사용
- 마침표(.) 대신 # 기호를 사용한다는 점만 제외하면 클래스 선택자와 사용법은 동일
- 클래스 선택자는 여러 번 반복 사용이 가능한데, id 선택자는 문서 내에서 한 번만 사용할 수 있음. (권장 사항 일반)
- 주로 큰 단락, 부모에서 사용, 자바 스크립트에서 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스타일시트</title>
<style>
* {
margin: 0;
padding: 0;
}
#title1 { color:#666666;}
#title2 { color:blue;}
#title3 { color:orange;}
#title4 { color:red;}
#title5 { color:gray;}
#title6 { color:green;}
</style>
</head>
<body>
<h1 id="title1">웹디자인</h1>
<h2 id="title2">스마트폰 웹디자인</h2>
<h3 id="title3">웹기획</h3>
<h4 id="title4">웹프로그래밍</h4>
<h5 id="title5">웹퍼블리쉬</h5>
<h6 id="title6">제이쿼리</h6>
</body>
</html>
5. 스타일의 우선순위
- 1. !important : 스타일에 강제 스타일 적용 시 사용 ex) background : red !importane
- 2. 인라인 스타일
- 3. 선택자 #id
- 4. 선택자 .class
- 5. 선택자가 tag
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
font-style: italic; /* 글자 스타일 */
color: red !important; /* 중요 스타일은 !important 붙임 */
}
p {
color: orange;
}
</style>
</head>
<body>
<h1>디자인스킬업</h1>
<p>2D 그래픽은 모든 그래픽에서 기본이라 할 수 있습니다. 그래픽 작업에서 높은 비중을 차지합니다.</p>
</body>
</html>
6. 상위 하위 속성
- 어떤 속성은 부모 태그에 특정 값을 적용 시 아래, 즉 하위 요소에도 그 속성들이 그대로 적용
- 이러한 개념을 "상속"
- 여러 태그들은 서로 포함 관계가 있고 포함하는 태그를 부모 요소라고 하며 포함된 태그를 자식 요소
- 자식 요소에 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일의 속성이 자식 요소로 전달
7. block
- 화면의 가로(폭) 길이 (100%)를 차지, 뒤에 오는 요소는 줄 바꿈이 일어나며,
- 여러 개의 <div> 태그를 나열하면 수직 방향으로 정렬이 됨
- 태그종류 : div, p, h1~h6, ul, al, from, table, blockquote~
- div (Division의 약자)
- 웹사이트의 레이아웃을 구성할 때 주로 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>block</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>HTML5-WEB 1</div>
<div>HTML5-WEB 2</div>
<div>HTML5-WEB 3</div>
<div>HTML5-WEB 4</div>
<div>HTML5-WEB 5</div>
</body>
</html>
8. inline
- inline : 해당 태그의 컨텐츠 만틈 공간을 차지(폭이 콘텐츠의 양에 비례). 글자와 같이 옆으로 나열되며 나타남
- 줄 바꿈이 일어나지 않기 때문에 <span></span>이라고 나열하면 수평방향으로 정렬
- width, height, margin-top, margin-bottom이 적용되지 않음
- 태그종류 : a, img, sub, sup, i, b, em(글자를 꾸미는 태그 종류), input
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<span>SPAN-inline</span>
<span>SPAN-inline</span>
<span>SPAN-inline</span>
<span>SPAN-inline</span>
<span>SPAN-inline</span>
</body>
</html>
9. box
- 넓이 width, 높이 heigjt 속성
- 박스 모델에서 콘텐츠 영역의 크기를 지정할 때 넓이와 높이 속성을 지정
- border : 선의굵기 선의스타일 선의색상 (순서는 상관없음)
- 위의 속성을 개별 부여할 시 아래와 같은 속성으로 표현 가능
- border-width : 선의 굵기
- border-color : 선의 색상
- border-style : 선의 스타일
- 선의 스타일
- none : 테두리가 나타나지 않음. 기본 설정
- solid : 테두리를 실선으로 표시
- dashed : 테두리를 직선 형태의 점선으로 표시
- dotted : 테두리를 도트 형태의 점선으로 표시
- 방향에 따른 개별부여 가능
- border-top : 위쪽 선
- border-bottom : 아래쪽 선
- border-left : 왼쪽 선
- borer-right : 오른쪽 선
- 시작 테두리 스타일을 각각 다르게 지정할 경우
- border-width : border-top-width, border-right-width, border-bottom-width, border-left-width
- > 12시부터 시계 방향으로
- ex) border-width: 1px 5px 10px 12px
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1{
width: 300px; /* 고정 넓이 */
height:100px; /* 고정 높이 */
border : green 2px solid; /* 테두리 굵기는 2px, 테두리 스타일 solid, 테두리 색상 green */
}
.box2{
width: 300px;
height: 100px;
border: red dashed;
border-width: 1px 5px 10px 12px; /* 12시부터 시계 방향으로 */
}
.box3 {
width: 300px;
height: 100px;
border: blue 1px dotted;
border-bottom-width: 5px; /* 아래 테두리만 따로 지정 */
}
.box4 {
width: 300px;
height: 100px;
border: pink dashed;
border-width: 5px 10px; /* (12시 6시) (3시 9시) */
}
</style>
</head>
<body>
<div class="box1">BOX-1</div>
<div class="box2">BOX-2</div>
<div class="box3">BOX-3</div>
<div class="box4">BOX-4</div>
</body>
</html>
10. box 설정 요소
- border-radius
- 네모 박스를 라운드 형태로 둥글게 만들 때 사용
- 라운드 지정하는 순서는 top-left, top-right, bottom-right, bottom-left
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 100px;
border: green 10px solid;
margin: 10px;
}
.box1{
border-radius: 30px; /* 전체 모서리를 30px로 라운드 지정 */
}
.box2{
border-radius: 10px 20px 30px 40px;
/* top-left : 10px, top-right: 20px; bottom-right: 30px, bottom-left: 40px 지정*/
}
.box3{
border-radius: 10px 40px;
/* */
}
.box4{
width: 100px; height: 100px; border-radius: 100px; /* 원모양 */
}
</style>
</head>
<body>
<div class="box1">BOX-1</div>
<div class="box2">BOX-2</div>
<div class="box3">BOX-3</div>
<div class="box4">BOX-4</div>
</body>
</html>
공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.
부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.
읽어주셔서 감사합니다 :)
