2022. 5. 7. 01:22ㆍ22-1학기/웹 기초(WEB BASIC)
WEB2 CSS - 1. 수업 소개 ~ 9. 박스 모델 써먹기
(Ctrl + O : 파일 여는 단축키)
-1. 수업 소개
웹이 처음 세상에 등장했을 때 : HTML을 이용하면 전자 문서를 만들 수 있었음 -> 컴퓨터를 통해서 정보를 표현할 수 있었고, 그 정보를 인터넷을 통해서 전 세계 누구나 볼 수 있게 되었음
-> 사람들이 웹에 열광하게 됨
-> 웹을 사용하다 보니 웹을 좀 더 아름답고 보기 좋게 만드는 방법에 대해 연구하게 됨
-> CSS가 개발되게 됨
-2. CSS가 등장하기 전의 상황
웹을 예쁘게 만드는 두 가지 방법
1. 쉽지만 한계가 있는 방법 : HTML이라는 이미 있는 언어의 디자인과 관련된 새로운 태그를 추가하는 것
2. 어렵지만 근본적인 해결책 : 디자인에 최적화된 완전히 새로운 언어를 만드는 것
웹브라우저를 만드는 사람들은 우선 쉬운 길인 1번을 선택했다가 그 한계를 깨닫고 2번 길을 선택하게 된다. 그것이 바로 CSS라는 새로운 언어이다.
<font> 태그 : 1번 방법
<font color="red">WEB</font>라고 하는 태그는 이 WEB에 대해서 어떠한 정보도 가지고 있지 않다. 다만 빨간색으로 표현해야 된다는 디자인을 나타낼 뿐이다. 디자인 자체가 정보는 아니기 때문이다.
-> 시각 장애인 분들이 봤을 때 의미가 없는 것은 정보가 아니라고 생각할 수 있다.
-<font> 태그의 문제점 : 웹페이지라고 하는 이 소중한 정보 안에 정보가 아니라고 할 수 있는 디자인에 대한 코드가 섞이면서 웹페이지가 정보로서의 가치가 현격하게 떨어지는 문제를 갖게 된다.
3. CSS의 등장
( <!-- ~ --> : 웹브라우저에게 이 기호 사이에 있는 콘텐츠를 없는 셈 치도록 하는 명령어)
-2번 방법인 CSS 언어
<style>, </style> 태그 : 웹브라우저에게 "지금부터 CSS로 코드를 쓸 거니까 이 코드를 HTML이 아니라 CSS 문법에 따라 해석해야 돼" 라고 HTML의 문법으로 말해주는 태그
->이 웹페이지에 있는 모든 <a> 태그에 대해서 : a
폰트 컬러 : color
빨간색 : :red;
-CSS의 효과 : 중복의 제거 -> 이 웹페이지의 유지, 보수가 편리해지고 가독성도 높아지게 된다.
- 웹페이지를 디자인할 때 HTML을 이용해서 디자인하는 것보다 CSS를 이용하는 것이 훨씬 더 효과적일 수 있다.
- HTML은 너무나 중요하기 때문에 HTML로부터 디자인에 관한 코드를 빼와서 HTML이 정보에 전념하게 한다.
4. CSS의 기봅 문법
-웹페이에게 어디서부터 어디까지가 CSS인지를 알 수 있게 해주는 기법
- <style>, </style> 태그
- style 속성을 이용하는 방법 :
- style="color:red" : style 속성 , HTML 속성
->style 속성을 쓰면 그 속성의 값을 웹브라우저는 CSS의 문법에 따라서 해석해서 그렇게 해석된 결과를 style 속성이 위치하고 있는 이 태그에 적용할 것이라는 의미
<style>
a {
color:red;
}
</style>
- a{ ~ } : 웹페이지에서 주고 싶은 효과를 누구에게 줄 것인가를 선택한다는 점에서 선택자(Selector)라고 부름
- color:blank; : 선택자에게 지정될 효과를 효과(Declaration)라고 부름 -> style 태그가 위치하고 있는 태그에게 효과를 줄 것이기 때문에 선택자라는 것을 사용할 필요가 없다.
-text-decoration : 밑줄을 만들고 없애는 속성
- 꾸밈, 장식이 없다 : none
- 밑줄을 긋고 싶다 : underline
-효과를 지정하고 난 다음에는 ;을 적어주기
5. 혁명적 변화
- a { } : 이 웹페이지에 있는 모든 a를 선택한다는 점에서 선택자(Selector)라고 부름
- color:red; : 선택자가 지정하는 태그들에 대해서 어떤 효과를 줄 것인가에 해당되는 것, 선언(효과, declaration)이라고 부름
- colr : 속성(property)라고 부름
- red : property의 값이라는 뜻에서 property value라고 부름
6. CSS 속성을 스스로 알아내기
-Property : CSS에서 어떤 효과를 의미하는 용어
-텍스트의 크기를 크게 하는 태그
- font-size:-px;
-텍스트를 가운데로 정렬하게 하는 크기
- text-align: center;
7. CSS 선택자의 기본
-CSS를 지배하는 두 가지 중요한 토대
- 효과
- 선택자
*링크의 색상 변경하기
: 기본-검은색, 사용자가 방문한 적이 있었던 페이지-회색, 현재 사용자가 머물고 있는 링크-빨간색
- HTML과 CSS를 같은 그룹으로 묶고, 그 그룹에 대해서 폰트 컬러를 회색으로 주는 방법 -> 두 개의 태그에 대해서 클래스(class)라고 하는 HTML의 속성을 주는 방법
->class : 같은 의도에 따라 학생들을 하나로 그룹핑하는 방법
- HTML : class="클래스이름"
- CSS : .클래스이름 {
color:gray;
}
- Class(클래스)를 여러 개 사용하는 방법
: class="이름1 이름2 이름3 .. 이름n"
->class의 속성 값에 여러 개의 값이 들어올 수 있고, 속성끼리는 띄어쓰기로 구분한다.
하나의 태그에 여러 개의 속성이 들어올 수 있고, 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.
- 명령을 하려는 HTML에, 보다 가까이 있는 명령어가 더 큰 영향력을 가진다.
<style>
a {
color:black;
text-decoration: none;
}
.saw {
color:gray;
}
.active {
color:red;
}
h1 {
font-size:45px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
->active가 saw보다 h1에 가깝게 있기 때문에 active의 명령대로 CSS가 빨간색으로 표시된다.
->권력이 같으면 가장 최근에 명령한 사람 말을 듣는다.
#active가 .saw보다 뒤에 등장했음에도 불구하고 리로드 했을 때 붉은색이 됨
->선택자의 우선순의 : id > class > 태그
->한 번 등장한 id 값은 쓰면 안 됨. 즉, id의 값은 단 한 번만 등장해야 함
(학교 ID 카드를 생각해보면 ID의 핵심은 중복돼서는 안 된다는 것이기 때문이다. 즉, 유일무이한 값이다.
웹페이지에 있는 모든 <a> 태그를 가리키는 선택자와 ID 값이 active인 태그만을 가리키는 선택자 중에서 ,
<a> 태그 선택자가 ID 선택자보다 훨씬 더 포괄적이다. 그래서 좀 더 구체적인 것이 포괄적인 것보다 우선순위가 높다.
8. 박스 모델
->웹사이트 예제에 디자인을 해가는 작업 = 박스 모델
- <h1> 태그 : 제목 태그 -> 화면 전체를 씀
- <a> 태그 : 링크 태그 -> 줄바꿈을 하지 않고 자기의 콘텐츠 크기만큼을 씀
- 테두리 변경 CSS
1.테두리 두께 지정
: border-width: -px;
2.테두리 컬러 지정
: border-color: 색상;
3.테두리 스타일 지정 (ex-단선, 점선, 실선)
: border-style: 스타일;
- 사용량에 따른 태그
1.화면 전체를 쓰는 태그 : block level element
2.자기 자신의 콘텐츠 크기만큼을 쓰는 태그 : inline element
(CSS에서의 주석 : /* ~ */)
- 태그의 종류를 바꾸는 CSS
1. block -> inline : display:inline;
2. inline -> block : display:block;
3. 태그를 아예 지우는 CSS : display:none;
-> 위의 html에서 중복을 제거한 버전
->콘텐츠와 테두리 사이에 여백을 주는 CSS :
padding: -px;
1.테두리와 테두리 사이의 빈 공간을 조절하는 CSS :
margin: -px;
2.태그(element) 폭 조절하는 CSS :
width: -px;
margin : 아예 바깥 공간
border : 경계선(테두리)
padding : content와 border 사이의 공간
content : 내용
9. 박스 모델 써먹기
border-bottom:1px solid gray; : 아래쪽에 1px의 회색 선 그리기(테두리 사용)
margin을 0으로 만들어서 회색 선과 <a>태그 사이의 간격을 좁게 만들고, padding을 넣어서 web과 회색 선 사이의 간격을 넓게 만든다.
<ol>태그의 margin 값을 0으로 줘서 선에 딱 맞게 붙이고, 너무 붙은 회색 선과 내용을 떼기 위해서 패딩 값을 20px으로 준다. 그리고 <body>태그의 옆 테두리를 없애기 위해서 margin을 0으로 줘서 화면에 내용을 꽉 채운다.
#웹페이지 기획서