HTML 과 CSS의 역할
- HTML : div 태그, 시멘틱 태그를 활용해서 배치, 레이아웃을 잡는다
- CSS : 효과 등을 완성
CSS의 필요성
2단 레이아웃 잡기/3단 레이아웃 잡기
- html만으로 되지 않고 css적용되어야만 이렇게 배치 가능
- 레이아웃도 html 만으로 되지 않는 경우들이 있다
작업 디렉토리
- WebContent/CSS/web
- WebContent : WebContent가 홈디렉토리, 이 안에 html,css,js,jsp 등 파일 넣어야함
CSS 사용 방법
1. <head></head> 태그 안에 <style></style> 태그를 추가
- 내부에 CSS코드를 쓴다는 표시
- 임베디드 방식, 내장형 방식
+ <style type="text/css"> 로 해도되고 그냥 <style> 로 해도됨
- 선택자 자리에 적용할 범위를 쓴다, 여기선 태그 h1을 썼다
- 모든 h1태그들은 이 CSS의 적용을 받는다.
- { } 안에 속성 : 값; 을 쓴다
- 두가지 이상의 속성을 쓸때는 ; 를 찍고 구분하고 연결한다
내장형 방식 예제
CSS 예제1
- css01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css사용 예제</title>
<!-- 1. 내장형 방식(embedded) -->
<style>
h2 {
font-family: 굴림; /* 글꼴설정 */
font-size: 18pt; /* 글자크기 */
color: red; /* 글자 색깔 */
}
h3 {
font-family: 명조;
font-size: 12pt;
color: green;
}
</style>
</head>
<body>
<h1>
css에 대한 예제
<hr>
</h1>
<h2>18pt크기의 빨간색 굴림체입니다.</h2>
<h3>12pt크기의 초록색 명조체입니다.</h3>
</body>
</html>
- <head> 태그 안의 내용이 정해져있다
- style 태그로 CSS의 시작을 표시해야 브라우저가 이게 CSS 코드임을 인식함
- 위 예제에서 h1태그는 css적용되지 않았으므로 기본적인 형태로 나타남
구조
- 2개의 속성 연결할때는 세미콜론으로 구분
- h2 : 선택자 자리, 지금은 태그 h2를 의미
- 그리고 {} 안에 속성 : 값; 들이 있다
- body 태그안의 모든 h2태그에 대해서 이 속성들이 적용됨
- 선택자 자리에 이상한 기호가 오거나 여러개 오는등 선택자를 잘 이해해야함
속성
- font-family : 글꼴
- font-size : 글자 크기 설정
- color : 글자 색
+ html 의 font태그와 비슷한 역할 하고 있다, css를 쓰면 한꺼번에 효과 낼 수 있다
+ /* */ 이 주석, 주석 해제는 잘 안됨
+ Ctrl + Shift + / : 주석 처리
CSS 예제2
- css02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 선택자가 컴마(,)로 분리되어 있으면 모두(h2,p) 동일한 CSS의 적용을 받는다.-->
<style type="text/css">
h2, p {
font-family: "arial black";
font-size: 18pt;
color: gold;
}
</style>
</head>
<body bgcolor="#990099">
<center>
<h2>
css에 대한 예제
<hr>
</h2>
<h2>The Fun Corner</h2>
<br>
<p>The Street Fair</p>
</center>
</body>
</html>
- 선택자두개가 , 로 연결되어있다 (순서 무관)
- h2태그와 p태그가 , 로 연결
-> h2태그, p태그 모두 동일한 css 적용
- 중괄호 열고 적용할 속성 쓰기
- 이 h2태그에 대해 css가 적용되어서 컬러 gold, 18pt ,글꼴 arial black으로 나타남
- 모든 내용은 <center> 안에 들어가있으므로 가운데 배치됨
- : 추가한 것과 비례해서 공백이 벌어짐, 소문자여야만 함
배경색
<body bgcolor="#990099">
</body>- body 태그 안에서 html 속성으로 배경색 적용
CSS 예제3
- css03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type=text/css>
h3 {
color: #ff1aff
}
h5 {
color: skyblue
}
h5 em { /* h5(부모) em(자식) */
color: white
}
</style>
</head>
<body bgcolor="blue">
<h3>
개봉 앞둔 애니메이션 <em>"포켓몬 3“</em>
</h3>
<hr>
<h5>
애니메이션 영화<em>“포켓몬 3”</em>의 홍보 인쇄물에 등장한 애쉬, 피카추 그리고 미스티의 모습입니다
</h5>
</body>
</html>
- h5와 em 사이가 , 가 아니라 띄어쓰기가 되어있다 -> 의미가 달라짐
h5 em { /* h5(부모) em(자식) */
color: white
}
- h5가 부모태그, em태그가 자식 태그
- 바깥쪽에 감싸주는 태그가 부모태그고 안에 있는게 자식 태그 이다
- 지금처럼 띄어쓰기가 있는경우에는 h5가 바깥쪽에 있는 em 태그만 컬러값을 white로 적용시켜라는 의미임
- h3안의 em 태그의 내용은 white가 적용되지 않는다
CSS 예제4
- css04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--
점(.)으로 된 선택자를 불러올때는 class 속성으로 불러와야 된다.
ex) <h1 class=java>
<h1 class=script>
-->
<style type="text/css">
.java {
color: pink
}
.script {
color: skyblue
}
</style>
</head>
<body bgcolor="black" text="white">
<h3>css의 클래스 정의를 이용한 예제입니다</h3>
<h4 class=java>태그에 상관없이</h4>
<h4 class=script>class 속성으로 태그이름을 설정할 수 있습니다</h4>
<h2 class=java>태그에 상관없이</h2>
<h2 class=script>원하는 부분에 스타일을 적용합니다</h2>
</body>
</html>
- 선택자가 .java처럼 .으로 되어있다
- .(점) 으로 선택자 지정해서 css적용할때는 클래스 속성으로(class=) 불러야함
- 특정 태그들만 선택하여 적용했던 이전의 코드들과 다르게 한가지 태그가 아니라 .java가 적용된 태그는 모두 적용 가능하다
- 적용하고자 하는 body 태그 안의 모든 태그에 모두 적용 가능
+ 부트스트랩에선 대부분 . 으로 선택자들이 만들어져 있으므로 적용할때 class속성으로 적용해야한다.
- h3 태그는 적용이 안되어있다, 설정하지 않음
- h4 태그는 .java라는 선택자를 class=java로 불러오면 글자색이 pink로 나타남
- .script로 된것을 적용하기 위해선 class=script 로 불러온다
CSS 예제5
- css05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--
샵(#)으로 된 선택자를 불러올때는 id속성으로 불러와야 된다.
ex) <h1 id=pinkstyle>
<h1 id=skybluesty>
-->
<style type="text/css">
#pinkstyle {
color: pink
}
#skybluesty {
color: skyblue
}
</style>
</head>
<body bgcolor="blue" text="white">
<h4 id=pinkstyle>태그에 상관없이</h4>
<h4 id=skybluesty>class속성으로 태그이름을 설정할 수 있습니다</h4>
<h2 id=pinkstyle>태그에 상관없이</h2>
<h2 id=skybluesty>원하는 부분에 스타일을 적용합니다</h2>
</body>
</html>
- CSS 범용적으로 적용하는 방법 2가지 (.으로 설정 , #으로 설정) 가 있다
- 그 중 # id 속성으로 적용하고 있다
- 선택자가 # (id 속성) 으로 만들어지는 경우가 가장 많다
CSS 범용적으로 적용하는 법 (선택자)
- . 으로 선택자 지정 : 클래스 속성 (class = ) 으로 해당 선택자를 불러서 CSS를 적용해야한다
- #으로 선택자 지정 : 아이디 속성 (id = ) 으로 해당 선택자를 불러서 CSS를 적용해야 한다
CSS와 Javascript에서의 id속성
- JS에서 설정하는 id 속성 와 CSS의 id 속성은 다르다
1. CSS에선 id는 css적용하기 위한 목적으로 사용한다.
<h4 id=pinkstyle>태그에 상관없이</h4>
<h4 id=skybluesty>class속성으로 태그이름을 설정할 수 있습니다</h4>- 여기서의 id는 CSS를 적용시키기 위한 id값이다
- # 으로 된 선택자의 CSS가 선택됨
2. Javascript 에선 id 태그는 동일태그가 여러개 있을때 태그들을 구분하기 위한 역할을 한다
<th>주소</th>
<td><input type=text size=70 name="address" id="address">
</td>- input 태그가 여러개 있으므로 이 태그들을 구분하기 위한 태그가 id 이다
- input태그를 구해와서 사용자가 id값 입력했는지 유효성검사를 할때 input을 구분하기 위한 역할로 id값을 다르게 설정한다
+ 부트스트랩
- CSS 프레임워크
- 대부분은.(점) 으로 선택자가 지정되어있다, 클래스 속성으로 적용해야한다
CSS 사용 방법
1. <head></head> 태그 안에 <style></style> 태그를 추가, <body></body> 에 적용됨 = 내장형 방식, 여태까지 했다
2. CSS를 외부 파일로 만들고 link 태그로 불러온다
- 확장자를 .css 파일로 만든다
+ 부트스트랩도 .css 파일로 되어있다, 서버에 올라가 있는것을 cdn방식으로 다운받아 사용함
- 딱 CSS 코드만 들어간다
- 단독으로는 아무 효과가 없고 불러와서 사용함
- link 태그로 불러온다
- 한번 만들어진 css 파일을 여러 html 파일에 적용 가능
CSS 외부파일 불러오기 예제
- style.css
p{ color : pink ;
font-size : 20pt ;
font-weight : bold ;
}- call.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 css파일 불러오기</title>
<!-- 2. 외부 css파일 불러오기 -->
<link rel=stylesheet type=text/css href=style.css>
</head>
<body bgcolor="purple" text="white">
<h3>외부 파일에 정의한 스타일을 적용</h3>
<hr>
<p>글자색은 핑크색, 글자 크기는 20pt, 글자의 속성은 bold로 지정한 스타일이 적용됩니다</p>
</body>
</html>
- html 파일의 <head> 태그안에서 <link> 태그로 불러온다
- href = 불러올 파일 을 쓴다
- 상대경로나 절대경로로 불러올 파일의 경로를 잡아줘야한다.
- link로 외부파일 .css를 불러오면 이 파일의 <body> 태그 안에서 불러온 CSS가 적용된다
- body 태그 안에 white 속성이 있으므로 기본 색상은 white 로 나온다
- p 태그에는 css가 적용되어서 글자색이 pink 이다
+ <head> 태그 안에 주로 들어가는 내용
- <meta> 태그
- <title> 태그
- <style> 태그
- <link 태그
ex) 네이버에서 외부파일 불러오는거 소스 코드 일부
<link rel="stylesheet" href="https://pm.pstatic.net/dist/css/nmain.20220720.css"> <link rel="stylesheet" href="https://ssl.pstatic.net/sstatic/search/pc/css/sp_autocomplete_220526.css">- css 파일들이 임시폴더에 이미 다운로드 받아져있다
- 이 파일들은 서버에 올라가있다, cdn 방식이라고 한다
- 한번 만들어진 css 파일을 여러 html 파일에 적용 가능 (동일 컨셉)
CSS 사용 방법
1. <head></head> 태그 안에 <style></style> 태그를 추가, <body></body> 에 적용됨 = 내장형 방식, 여태까지 했다
2. CSS를 외부 파일로 만들고 link 태그로 불러온다
3. 특정 태그 1개에 대해서 style= 로 CSS 를 적용하는 방식
- 인라인 방식
- 지금까지는 동일 태그들은 모두 한꺼번에 적용되었따
- 특정 원하는 태그 1개에만 CSS를 적용하는 방식
인라인 방식 예제
- div1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<TITLE>범위 안에서 스타일 지정</TITLE>
</HEAD>
<!-- 3. 인라인 방식
1) 특정 태그 1개에 대해서 CSS를 적용하는 방식이다.
2) 인라인 방식의 형식은 특정 태그에 style="속성:속성값" 형식으로 CSS를 적용한다.
ex) <div style="color : red">
-->
<BODY BGCOLOR="white">
<CENTER>
<H1>
<SPAN STYLE="font-style: italic">범위 안에서</SPAN> 스타일 지정
<DIV STYLE="color: red">범위 안에서 스타일 지정</DIV>
</H1>
</CENTER>
</BODY>
</HTML>- 특정 태그 안에 style = 을 쓰고 " " 안에 속성 : 값 을 나열한다
- <span> 이란 1개의 특정 태그에 대해서만 css를 적용시키고 있다. style="font-style : italic"
- <div> 이란 1개의 특정 태그에 대해서만 css를 적용시키고 있다. style="color : red"
+ h1 태그로 감싸져있으므로 안의 내용이 크고 굵게 출력됨
+ center 태그 안에 작성되었으므로 가운데 정렬됨
+ 배경색은 white 이다
CSS 사용 방법 정리
1. <head></head> 태그 안에 <style></style> 태그를 추가, <body></body> 에 적용됨 = 내장형 방식, 여태까지 했다
2. CSS를 외부 파일로 만들고 link 태그로 불러온다
3. 특정 태그 1개에 대해서 style= 로 CSS 를 적용하는 방식
CSS 사용 방법 응용 예제 1
- div2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<TITLE>범위 안에서 스타일 지정</TITLE>
<STYLE TYPE="text/css">
DIV.color {
color: tomato
}
.style {
font-style: italic
}
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
<CENTER>
<h2 class="color">css 적용하기</h2>
<H1>
<DIV class="color">
전체 범위 안에서 색 지정<BR> <SPAN class="style">범위 안에서 이탤릭으로 지정</SPAN>
</DIV>
</H1>
</CENTER>
</BODY>
</HTML>- . 으로 된 선택자는 class 속성으로 불러오면 해당 css가 적용됨
DIV.color와 .style의 선택자의 차이
공통점 : class 속성으로 불러와야한다
차이점 : 의미가 다르다
1. DIV.color 선택자 처럼 앞에 태그명이 오는 경우
- 아무 태그나 적용되지 않는다
- h2태그에서 class="color"를 부르면 적용 안됨
- DIV 태그에서 class="color'를 부르는 경우에만 적용된다
- 선택의 폭이 좁아짐
2. .style 로 앞에 태그명이 안오는 경우
- 아무 태그나 class 속성을 적용하면 이 스타일이 적용되면서 italic 적용
- h2 태그에서 class="color" 로 .color 선택자를 불러오더라도 적용이 되지 않고 토마토색이 아닌 검은색으로 출력됨
- DIV 태그에서 class="color" 로 .color 선택자를 불러와야만 CSS가 적용이 된다, 토마토 색으로 출력된다
CSS 사용 방법 응용 예제 2 / text-decoration 속성 예제1
decoration.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<TITLE>링크되는 부분의 밑줄 없애기</TITLE>
<STYLE TYPE="text/css">
A:link {text-decoration: none}
A:hover {text-decoration: underline}
A:visited { text-decoration: none}
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
<CENTER>
<BR> <A HREF="http://www.yahoo.com">메인 페이지로 이동합니다.</A>
</CENTER>
</BODY>
</HTML>
- 하이퍼링크 anchor 태그로 링크가 걸리면 밑줄이 자동으로 나타난다
- 밑줄 여부를 제어할때 사용하는게 text-decoration 속성이다
- anchor 태그의 4가지 상태에 따라 나눠서 세부적인 CSS를 다르게 적용할 수 있다
ex) A:Link : anchor 태그의 상태 중 Link 상태일때 적용
- : 을 찍고 상태를 적어서 서로 다른 CSS를 적용시킴
위 예제 설명
1. 코드에서 link 상태일때 : none
2. 코드에서 hover 상태일때 : underline
3. 코드에서 visited 상태일때 : none
text-decoration 속성
- none : 선을 그리지 않음
- underline : 텍스트 밑에 선을 그려줌
- line-through : 텍스트 가운데 취소선을 그려줌
- overline : 텍스트 위에 선을 그려줌
+ 주로 anchor 태그에 적용을 많이 시킨다
anchor 태그의 4가지 상태
1. link 상태
- 기본으로 링크가 걸려있을때
- A : link { 속성 : 속성값 } 으로 적용
2. active 상태
- 링크가 걸린 라인을 마우스 왼버튼으로 "누르고" 있는 상태
- A : active { 속성 : 속성값 } 으로 적용
3. hover상태
- 누르진 않고 마우스 포인터가 올라간 상태 (손모양)
- A : hover{ 속성 : 속성값 } 으로 적용
4. visited 상태
- 한번 방문하고 돌아왔을때
- A : visited { 속성 : 속성값 } 으로 적용
text-decoration 속성 예제2
- textdecoration.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<TITLE> 텍스트에 선 그려주기 </TITLE>
</HEAD>
<BODY BGCOLOR="white">
<H2> 텍스트에 선 그려주기 </H2>
<P STYLE="text-decoration: none"> 선을 그려주지 않습니다 </P>
<P STYLE="text-decoration: underline"> 텍스트 밑에 선을 그려줍니다 </P>
<P STYLE="text-decoration: line-through"> 텍스트 가운데 취소선을 그려줍니다 </P>
<P STYLE="text-decoration: overline"> 텍스트 위에 선을 그려줍니다 </P>
<P STYLE="text-decoration: underline overline"> 텍스트에 밑과 위 모두 선을 그려줍니다 </P>
</BODY>
</HTML>- 인라인 방식을 사용하고 있다
정리
- text-decoration 속성 : 하이퍼링크 밑줄 여부 제어
교재 학습
+ HTML/source/chapter_5, chapter_6, chapter_7 이 CSS 관련 내용이다
선택자
- HTML/source/chapter_5 설명할 것
- * : 모든 태그에 대해 선택하라
- . : class 속성으로 불러오기
- # : id 속성을 ㅗ불러오기
- 태그 : 그 태그 모두에게 적용하기
- 선택자 선택자 : 왼쪽이 부모, 오른쪽이 자식, 후손 태그가 된다
- 부등호기호가 있는 선택자가 있다, 선택자 사이 띄어쓰기 한것과 다름
- 상태 선택자 알아두자
- + 나 ~ 선택자 알아두가
- link, visited 했었다
이런 내용들을 예제를 통해서 공부할 것
선택자 예제1
- selector_basic.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<meta charset=utf-8>
<style>
h1 {
color: red;
background-color: orange;
}
</style>
</head>
<body>
<h1>CSS3 선택자 기본</h1>
</body>
</html>- 내장형 방식, <body>태그에 적용
- <body> 태그안의 모든 <h1> 태그는 css의 적용을 받는다
- 전체 배경색이 아닌 h1태그에만 적용됨
- 전체 배경색을 적용하려면 body 태그안에 bgcolor 작성
선택자 예제2
- default_wildcard.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic Page</title>
<style>
* { color: red; }
</style>
</head>
<body>
<h1>제목 글자 태그</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p>
</body>
</html>- 선택자 자리에 * 가 온다
- 모든 태그, 즉 all tags 에 적용
- <body> 태그 안의 모든 태그들에 CSS 가 적용되어 red 로 나타나고 있다
선택자 예제3
- default_tag.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic Page</title>
<style>
h1 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h1>제목 글자</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p>
<p>Etiam lacus felis, ornare non lobortis ac, vehicula non diam. Integer pellentesque neque eget eros pulvinar pharetra. Maecenas gravida mi dui, at sollicitudin justo. Vestibulum pretium lacus lobortis arcu egestas dapibus. Sed nunc dui, adipiscing vitae mattis in, accumsan in neque. Sed pellentesque leo quis lorem posuere consequat. Duis sapien risus, rutrum ut ullamcorper et, accumsan a lorem. Ut metus est, varius eget molestie vitae, rutrum vitae ante. Quisque eu quam leo, et hendrerit lorem. Nullam nec risus sapien. Phasellus ut mauris eget justo mollis dictum. Nullam consectetur nibh at sem luctus mollis.</p>
</body>
</html>
- 모든 h1 태그에 대해 color : red 적용되었다
- 모든 p 태그에 대해 color : blue 적용되었다
선택자 예제3
- default_id.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic Page</title>
<style>
#header {
width: 800px; margin: 0 auto;
background: red;
}
#wrap {
width: 800px; margin: 0 auto;
overflow: hidden;
}
#aside {
width: 200px; float: left;
background: blue;
}
#content {
width: 600px; float: left;
background: green;
}
</style>
</head>
<body>
<div id="header">
<h1>#header 태그</h1>
</div>
<div id="wrap">
<div id="aside">
<h1>#aside 태그</h1>
</div>
<div id="content">
<h1>#content 태그</h1>
</div>
</div>
</body>
</html>- #으로 선택자가 지정되어있고, 불러올 때는 id 속성으로 불러와서 적용한다
- #header, #wrap, #aside 등 # 의 css 사용 -> id 속성으로 불러온다
- 시맨틱 태그인 header 태그 를 이용해도 되고 , div 태그를 사용해도 된다
- div는 박스를 만들어줌
- div는 자체적으로는 아무 기능이 없다
- #aside와 #content가 둘 다 float : left 지만 aside가 먼저 나왔으므로 왼쪽 정렬되고 다음에 content가 붙어서 정렬된다
속성
- width : 가로길이 값 속성
- margin : 0 auto -> 가운데 배치시켜줌
- overflow : 내용이 많아서 크기를 넘치게되면 hidden으로 보이지 않게 만들고있다
- float : 특정 div를 왼쪽에 배치할땐 left, 오른쪽에 배치할땐 right
- background : 배경색
+ 2-layout.html 잠깐보기
- 주로 #으로 되어있다, #을 많이 사용함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2단 레이아웃</title>
<style>
div {
border: 1px solid #ccc; /* 모든 영역에 테두리 표시 */
}
#container {
width:960px; /* 컨테이너 너비 */
padding:20px; /* 패딩 */
margin:0 auto; /* 화면 중앙에 배치 */
}
#header {
padding:20px; /* 패딩 */
margin-bottom:20px; /* 아래 요소들과의 간격(마진) */
}
#contents {
width: 620px; /* 너비 */
padding: 20px; /* 패딩 */
float: left; /* 왼쪽으로 플로팅 */
margin-bottom: 20px; /* 아래 요소와의 간격 */
}
#sidebar {
width: 220px; /* 너비 */
padding: 20px; /* 패딩 */
float: right; /* 오른쪽으로 플로팅 */
margin-bottom: 20px; /* 아래 요소와의 간격 */
background:#eee;
}
#footer {
clear:both; /* 양쪽 플로팅 해제 */
padding:20px; /* 패딩 */
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>사이트 제목</h1>
</div>
<div id="sidebar">
<h2>사이드 바</h2>
<ul>
<li>모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</li>
</ul>
</div>
<div id="contents">
<h2>본문</h2>
<p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.</p>
<p>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.</p>
</div>
<div id="footer">
<h2>푸터</h2>
<p>이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>
</div>
</div>
</body>
</html>
선택자 예제4
- default_class.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
.select { color: red; }
</style>
</head>
<body>
<ul>
<li class="select">사과</li>
<li>바나나</li>
<li class="select">오렌지</li>
<li>감</li>
</ul>
</body>
</html>- . 으로 된 선택자를 사용하고 있고, class 속성으로 불러오고 있다
- bootstrap에서 주로 . 으로 된 선택자를 사용하고 있다, class 속성으로 불러와야한다
선택자 예제5
- . 을 2개를 적용하려 한다면?
- default_multiClass.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
.item { color: red; }
.header { background-color: blue; }
</style>
</head>
<body>
<h1 class="item header">동해물과 백두산이</h1>
</body>
</html>- 두개의 선택자를 동시에 적용하고 있다
- .item 과 .header를 모두 적용하려 한다면 태그에서 class="item header" 로 써주면 두 가지가 다 적용됨
- 즉 color : red 와 background-color : blue 가 모두 적용됨
선택자 예제5
- <input type=> 같은 태그에 css 적용시키려면 구분이 필요하다, id값이나 class값이 필요하다
- attribute_basic.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic Page</title>
<style>
input[type="text"] { background: red; }
input[type="password"] { background: blue; }
</style>
</head>
<body>
<form>
<input type="text" />
<input type="password" />
</form>
</body>
</html>- input[type="text"] : input type= 이 text인 "모든" 태그들을 불러와라는 의미 -> background : red
- input[type="password"] : input type= 이 password인 "모든" 태그들을 불러와라는 의미 -> background : blue
- type 이 있는 태그에서 특정 양식을 불러올때 사용되는 선택자다
후손 태그
- 부모태그, 자손태그(자식태그), 후손태그 가 있다
- 자식태그는 바로 아래의 태그들만 의미함
- 자식도 후손 태그에 포함됨
- 상속관계와는 관계 없다
선택자와 자식/후손태그
- 선택자A 선택자B : 왼쪽의 선택자 A태그가 부모태그가 되고, 오른쪽의 선택자 B태그가 후손태그 의미
- (자식태그 or 후손태그) 다 된다
- 만약 부등호기호(화살표)가 있을땐 자식태그만을 의미
자식태그와 후손태그 구분
선택자 예제6
후손 선택자/자손 선택자 예제1
- desc_decendants.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
#header h1 { color: red; }
#section h1 { color: orange; }
</style>
</head>
<body>
<div id="header">
<h1 class="title">Lorem ipsum</h1>
<div id="nav">
<h1>Navigation</h1>
</div>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p>
</div>
</body>
</html>
선택자
- #header h1 : 띄어쓰기가 되어있다, 왼쪽인 #header로 불러오는 태그가 부모태그이고 오른쪽인 h1 태그가 후손태그이다
- 바로 아래쪽인 자식태그인 h1태그 Lorem ipsum 에만 적용되는 것이 아니라 Navigation 인 손자태그(후손태그) 에도 적용된다
- 즉, #header를 통해 불러진 태그가 부모태그고 그 태그 안의 모든 h1에 css color : red가 적용된다
- 바로 아래쪽의 자식 Lorem ipsum 에게만 적용하고 싶다면 선택자로 #header>h1을 사용해야한다
- #section h1의 경우에도 마찬가지이다
선택자 예제7
후손 선택자/자손 선택자 예제2
- desc_children.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
#header > h1 { color: red; }
#section > h1 { color: orange; }
</style>
</head>
<body>
<div id="header">
<h1 class="title">Lorem ipsum</h1>
<div id="nav">
<h1>Navigation</h1>
</div>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>- 선택자A > 선택자B 에서 왼쪽이 부모태그, 오른쪽이 자식태그 가 된다.
- #header > h1 이면 #header를 부르는 태그가 부모태그, 그 태그 안의 h1태그가 자식 태그가 된다.
- > 를 쓰면 후손이 아닌 바로 아래쪽의 자식 태그들에게만 적용되고 자식을 제외한 후손에게는 적용되지 않는다.
- #header 안의 자식태그인 h1태그의 Lorem ipsum 에만 color : red가 적용되고, 자식이 아닌 후손태그인 Navigation에는 color : red가 적용되지 않는다.
- #section > h1 의 경우에도 마찬가지이다.
후손선택자 자손선택자 정리
부모 후손 : 공백 사용, 후손(자식태그 + 자식이 아닌 후손태그)
부모>자식 : > 사용, 자식 태그만 적용
후손 선택자/자손 선택자 예제3
- desc_tableWithChildren.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
table > tr > th {
color: red;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>지역</th>
</tr>
<tr>
<td>윤인성</td>
<td>서울특별시 강서구 내발산동</td>
</tr>
</table>
</body>
</html>- 자손 선택자 > 를 3단으로 사용하고 있다.
- 출력시 빨간색 글자가 적용되지 않는다!
- 개발자 도구에 가서 이유를 확인하자
개발자 도구 들어가는법
- 단축키 F12
- 또는 도구 더보기 - 개발자 도구
코드 구조
- 작성시에는 작성하지 않았지만 자동으로 tbody 태그가 오기때문에 table > tbody > tr > th 로 해야 적용됨
수정한 코드
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
table > tbody > tr > th {
color: red;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>지역</th>
</tr>
<tr>
<td>윤인성</td>
<td>서울특별시 강서구 내발산동</td>
</tr>
</table>
</body>
</html>
- 잘 출력되고 있다
- 이런 것들에 유의하자, 개발자 도구에서 확인 가능
반응 선택자
- 주로 anchor 택에 적용시키지만 다른 태그에도 적용 가능
- h1:hover 하면 h1태그 해당 하는 곳에 마우스를 올려둔 상태일때 의미
반응 선택자 예제
- etc_action.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
h1:hover { color: red; }
h1:active { color: blue; }
</style>
</head>
<body>
<h1>반응 선택자</h1>
</body>
</html>원래 상태
hover 상태
- 마우스를 올리고 있는 상태
- ( 마우스 오버 이벤트 ) <-> ( 마우스 아웃 이벤트 )
active 상태
- 마우스 왼쪽으로 누르고 있는 상태
상태 선택자
- 상태를 의미하는 선택자들
- :checked : 체크박스등에서 체크가 되어있는 상태
- :focus : focus가 들어간 상태
- :enabled : 사용 가능한 상태
- :disabled :사용 불가능한 상태
이 상황이 되면 이 상황에 맞는 효과가 나타남
상태 선택자 예제
- etc_state.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* input 태그가 사용 가능할 경우에
background-color 속성에 white 키워드를 적용합니다. */
input:enabled { background-color: white; }
/* input 태그가 사용 불가능할 경우에
background-color 속성에 gray 키워드를 적용합니다. */
input:disabled { background-color: gray; }
/* input 태그에 초점이 맞추어진 경우에
background-color 속성에 orange 키워드를 적용합니다. */
input:focus { background-color: orange; }
</style>
</head>
<body>
<h2>사용 가능</h2>
<input />
<h2>사용 불가능</h2>
<input disabled="disabled"/>
</body>
</html>+ type=text는 기본값이라 생략 가능하다
+ 텍스트 박스 비활성화 시키는 방법 2가지 : readonly / disabled , 현재는 disabled 속성 -> 수정 변경 불가
- 사용 가능한 경우는 background-color : white 를 적용하고
- 이렇게 사용 불가능할때 background-color : gray 를 적용한다
- enabled 상태 (기본적인 상태, 위)
- disabled 상태 (아래)
- focus 상태일 때 (위)
구조 선택자
- 몇번째 자식인지 선택
CSS 단위
- 크기를 표현하는 여러 단위들이 있다
- 상대적인 단위도 있고 절대적인 단위도 있다
스타일 시트에서 사용되는 단위
1. 절대적인 단위
- in 인치 (1 inch = 2.54 cm)
- cm 센티미터
- mm 밀리미터
- pt 포인터 (1 point = 1/72 inch)
- pc 파카스 (1 picas = 12 포인터)
2. 상대적인 단위
- em : 폰트의 높이를 측정하기 위한 단위로 영문 대문자 M을 기준으로 함. 이 M의 길이가 1em
- ex : 폰트 높이의 반을 측정하는 것으로 영문 소문자 x가 기준임
- px : 1픽셀을 1로 하는 단위 (width height에서 단위 생략 시 기본 단위)
- % : 기준이 되는 크기에 대한 상대적인 비율
+ %단위는 기준이 되는 값에서 몇 % 크기인지 설정함, ex) 100% 150% 200%
색상 단위
ex) HEX 코드 #ff0000 : red
ex) RGB 색상 rgb(255, 0, 0) : red
- 주로 HEX 코드 형태를 많이 쓴다.
- RGBA 에서 A는 알파를 의미하고 알파값은 투명도를 의미한다.
- 0 은 완전 투명, 1은 완전 불투명이다.
글자 색상 red 적용하는 방법 예제
<style> /* 전부 같다 */
/* h1:hover { color: red; } */
/* h1:hover { color: #ff0000; } */
h1:hover { color: rgb(255,0,0); }
</style>
+ 색상 코드는 rgb 색상표를 검색하면 쉽게 찾을 수 있다
CSS의 속성
- HTML/source/chapter_6 설명할 것
- div 태그로 박스를 만든다, div 태그 자체는 아무 기능이 없음
- 그 div 태그에 css 속성을 추가하면 다양한 형태, 모양을 만들 수 있다
박스(div)의 속성
- border : 테두리 설정 속성
- margin : 테두리와 바깥쪽의 내용사이 간격
- padding : 테두리와 내용사이 간격
div 태그 속성 예제1
- box_withHeight.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Property Basic</title>
<style>
div {
width: 100px; height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>- 아래 div 태그만으로는 아무 역할을 하지 못하지만 css가 적용되면 다양한 모양이 됨
- 박스(공간) 을 정사각형 모양으로 출력 ( 가로 100px, 세로 100px )
- 배경색은 red
- 이 영역이 div 영역이다
div 태그 속성 예제2
- margin / padding 속성 관련
- box_marginPadding.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Property Basic</title>
<style>
div {
width: 100px; height: 100px;
background-color: red;
border: 20px solid black;
margin: 10px; padding: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>- 한꺼번에 적용할땐 나열한다 ex) border : 20px solid black; -> 테두리를 20px, 실선, 검정색으로 설정하라
- margin은 테두리와 다른 영역사이 간격
- padding은 테두리와 내용 사이 간격
- margin과 padding을 바꿔보자
- margin : 10px -> margin : 100px
- div 내부에 내용 작성하기
<!DOCTYPE html>
<html>
<head>
<title>CSS Property Basic</title>
<style>
div {
width: 100px; height: 100px;
background-color: red;
border: 20px solid black;
margin: 100px; padding: 30px;
}
</style>
</head>
<body>
<div>박스만들기</div>
</body>
</html>
- padding은 좌측 상단을 기준이다.
margin과 padding의 세분화
- 왼쪽에 떨어진 간격, 위에서 떨어진 간격 등
- 이렇게 세분화하여 4가지씩으로 나눠서 속성을 적용할 수 있다
네 방향 속성 지정하기
- 또한 margin 과 padding을 한번씩 쓰는데 4가지 값을 쓸 수 있다
- 순서는 시계방향
네 방향 속성 지정하기 예제
- box_marginPaddingEachFour.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Property Basic</title>
<style>
div {
width: 100px; height: 100px;
background-color: red;
/* margin: 위 오른쪽 아래 왼쪽 */
/* padding: 위 오른쪽 아래 왼쪽 */
margin: 0 30px 0 30px;
padding: 0 30px 0 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
두 방향 속성 지정하기
- 또한 margin 과 padding을 한번씩 쓰는데 2가지 값을 쓸 수 있다
- 순서는 위아래 왼오
두 방향 속성 지정하기 예제
- box_marginPaddingEachTwo.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Property Basic</title>
<style>
div {
width: 100px; height: 100px;
background-color: red;
/* margin: 위아래 왼쪽오른쪽 */
/* padding: 위아래 왼쪽오른쪽 */
margin: 0 30px; padding: 0 30px;
}
</style>
</head>
<body>
<div>박스만들기</div>
</body>
</html>
border 속성
1. 여러 속성을 따로 지정할 수도 있고
2. 한꺼번에 값들을 나열해서 속성을 적용할 수 있다
border 속성 예제1
- border_basic.html
1. border_width, border-style, border-color 처럼 따로 속성을 지정하는 방법
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
border-width: thick;
border-style: dashed;
border-color: black;
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>
</html>- border-width : thick = 두꺼운 선
- border-style : dashed = 점선
- border-color : black = 검정선
- 이렇게 따로 속성을 다 써서 적용시키고 있다
border 속성 예제2
2. border를 한번만 쓰고 한꺼번에 적용하는 방법
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
/* border-width: thick;
border-style: dashed;
border-color: black; */
border : thick dashed black;
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>
</html>
- 같은 결과를 출력
+ 또한 border-top, border-bottom, border-left, border-right 처럼 세분화해서 적용할 수도 있다
+ 2-layout.html에서 전체가 div로 만들어져있고 div안에 div가 여러개 들어가있다
+ 컬러코드 #ccc = #cccccc 같은게 2개 반복될때는 1개로 쓰기도 한다 cc->c
둥근 테두리 만들기
- border-radius : 모서리 완만하게 만드는 속성, 이 값이 클수록 원에 가까운 형태가 됨
둥근 테두리 만들기 예제1
- border_radius.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
border-width: thick;
border-style: dashed;
border-color: black;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>
</html>
- border-radius 값을 40으로 수정
- border-radius 값이 클수록 원에 가까워짐, 더욱 완만해짐
- border-radius만 쓰면 4개의 모서리에 대해 똑같이 적용된다.
4개의 모서리별로 따로 둥글기 설정 예제
- 4개의 모서리 별로 따로 적용하는 것도 가능하다
- border_radiusEach.html
- 그림 참고
div 태그의 display 속성
- 박스를 여러개 만들었을때 가로방향으로 배치할건지 세로방향으로 배치할 건지 등을 설정
- display : none : 화면에 박스가 나타나지 않음
- display : block : 위에서부터 아래쪽으로 배치
- display : inline : 왼쪽에서 오른쪽으로 배치
- display : inline-block : 인라인과 비슷하게 가로 방향으로 배치
div 태그의 display 속성 예제1
- display_none.html
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: none;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>
</html>- #으로 된 선택자는 id= 속성으로 적용하고 있다
- display : none이라서 div의 테두리를 만들지 않음, 박스 자체가 없기때문에 출력이 되지 않고 있다
- 두 "더미 객체" 사이에 들어가야할 div태그 안의 내용을 화면에 보이지 않는다
div 태그의 display 속성 예제2
- display_block.html
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: block;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>
</html>- display : block; 된 박스(div)는 위에서부터 아래쪽 방향으로 출력된다
- 가장 많이 쓰는 형태
div 태그의 display 속성 예제3
- display_inline.html
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: inline;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>
</html>
- display : inline; 된 박스(div)는 왼쪽부터 오른쪽 방향으로 배치가 됨
div 태그의 display 속성 예제4
- display_inline-block.html
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: inline-block;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>
</html>
- inline-block도 inline 과 비슷하게 같은 방향으로 출력되고 있다
- inline-block도 왼쪽에서 오른쪽 방향으로 출력
inline과 inline-block의 차이
+ inline-block은 inline의 단점을 보완한다
- width/height 적용 가능
- margin/padding-top/bottom 적용 가능
- line-height 적용 가능
'국비지원 과정 > 웹표준' 카테고리의 다른 글
| 코딩 43일 / 22.08.19 / jQuery의 선택자, 함수, 이벤트 함수 (0) | 2022.08.19 |
|---|---|
| 코딩 39일 / 2022.08.12 / 자바스크립트 사용자 정의 함수,배열,객체,String 객체,Math 객체 (0) | 2022.08.12 |
| 코딩 38일 / 2022.08.11 / 자바스크립트 연산자,제어문,내장 함수2 (0) | 2022.08.11 |
| 코딩 37일 / 2022.08.10 / 부트스트랩2,아파치 톰캣에 배포,자바스크립트 기초,내장함수1 (0) | 2022.08.10 |
| 코딩 36일 / 2022.08.09 / CSS 속성2,레이아웃,배치,반응형 웹,부트스트랩1 (0) | 2022.08.09 |