HTML CSS (CSS, CSS 지정 방식, 스타일시트, 아이디선택자, 스타일의 우선순위, 상위 하위 속성, block, inline, box, box 설정 요소)
1. 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>
공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.
부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.
읽어주셔서 감사합니다 :)