-
이번 주에는 CSS 강의를 들었다.
(5) WEB2 CSS - 1. 수업 소개 - YouTube
HTML을 이용하면 전자문서를 만들 수 있었다. 정보를 인터넷을 통해 누구나 보게 할 수 있다는 것은 혁명적이었고 웹에 열광했다. HTML을 이용해서 문서를 만든 것이 시작이었지만 여러가지 불만이 생겼고 그 중 웹페이지를 아름답고 보기 좋은 형태로 만드는 것이 지금 배울 CSS와 연관되어 있다. CSS를 지배하는 원리와 효과를 앞으로 알아보자.
(5) WEB2 CSS - 2. CSS가 등장하기 전의 상황 - YouTube
문서를 만든 이후 여러 불만이 생김(문자의 크기와 색상, 가운데 정렬 등)
웹페이지를 아름답게 만들기 위한 고민 -> 1. 쉽지만 한계가 있는 방법: HTML에 새로운 태그를 추가하는 것
2. 어렵지만 근본적인 해결책: 완전히 새로운 언어를 만드는 것
먼저 1번의 내용을 보자.
<font>, </font>: 링크들의 파란색을 다른 색으로 바꿀 수 있다.
<font color="색"></font>
a 태그를 계속 바꿔주고 싶은 경우..-> CSS 사용
(5) WEB2 CSS - 3. CSS의 등장 - YouTube
(이어서) 2번의 내용
<!--, --> : 여기 사이는 없는 셈 치는 것.
font 말고 CSS를 사용해보자.
- 기본적으로 다 html이라 생각
- css는 html과 완전히 다른 언어
따라서 css의 문법으로 해석하라고 html의 문법으로 이야기해줘야 한다.
-> <style> , </style> : html의 문법이면서 동시에 안쪽의 내용은 css이니까 css 언어의 문법으로 해석해서 처리하라는 의미
----> 모든 a 태그의 폰트 컬러를 붉은 색으로 하라는 것을 css에 따라 작성해보자.
----> 모든 a 태그에 대해서 == a { ({}는 쓸 때 묶어주는 거)
-----> 폰트 컬러 == color: red;
아래 스크린샷을 참고하면 이해하기 쉽다.
css는 새로운 언어를 해석하는 기능을 탑재해야 해서 어렵지만 css를 사용할 때 더 큰 효과가 있기 때문이다.
css에서는 만약 태그의 컬러를 검은색으로 바꾸고 싶다면 a 태그 다 안 바꾸어주고 한 단어만 바꾸어주면 된다.
+ 중복의 제거: font를 사용한다면 font color 가 4번 등장한다. css는 중복된 태그를 하나의 코드로 중복을 제거할 수 있다.
(5) WEB2 CSS - 4. CSS의 기본 문법 - YouTube
css 문법
html과 css가 완전히 다른 언어이므로 어디부터 어디까지가 css 언어인지 알려주기 ==<style>, </style>
또 다른 방법: 속성을 이용하는 것(style 은 태그임)
css라는 텍스트만 파란색으로 표시하고 싶다면 style 태그로는 불가능. css를 감싸고 있는 a 태그에 color:red 넣으면 html인지 css인지 알 수 없음. -> color:red 에 대해서 sytle="color:red" 가 가능하다.
" " 부분은 html의 속성, style은 그 값으로 css의 효과가 들어온다.
a { } 쓰고 싶은 효과를 누구에게 줄 지 선택 == 선택자 라고 부른다.
선택자에게 지정된 효과 color:black == 선언
a {
color:black;
}
sytle 태그 직접 사용하면 그 태그에만 주니까 선택자 사용할 필요 없다.
따라서 색 바꿔주고 싶으면 1. style 태그 2. style 속성
1.HTML과 2.CSS 와 3.Javascript의 밑줄 없애주고 싶은 경우
밑줄 없애기==text-deocration: none; (구분자로 ; 사용하는 것. 효과 지정 후에는 꼭 세미클론으로 지정해주자. 그렇게 하면 한 줄에 다 써도 이해할 수 있음.)
2. CSS라는 웹페이지만 밑줄 긋고 싶은 경우
sytle ="color:red" 에다가 추가
style="color:red;text-decoration:underline"
(5) WEB2 CSS - 6. CSS 속성을 스스로 알아내기 - YouTube
CSS에서의 어떤 효과를 의미하는 것이 property.
불만족
- web이라는 제목을 더 크게 하고 싶다
-> web은 h1태그. h1밑의 텍스트를 더 크게 하고 싶다.
h1{} 사용하기.
Web 을 크게 만들자.
css text size property)
px는 컴퓨터에서 사용하는 단위.
h1 {
font-size:60px;
}
(60 한 번 넣어보고 폰트 사이즈 보고 바꿔주면 편함)
2. 가운데 정렬하고 싶다.
css text center property)
text-align:center; 을 {} 사이에 넣어주면 가운데 정렬 가능
property는 암기하지 말자.
(5) WEB2 CSS - 7. CSS 선택자의 기본 - YouTube
css를 지배하는 토대 1. 효과 2. 선택자
이번 시간에는 선택자에 대해 알아보자.
style color:black을 없애주면 한 번 방문한 링크는 보라색, 방문하지 않은 링크는 파란색으로 뜨는 것을 볼 수 있다.
모든 a 태그를 검은색으로 바꾸고 방문한 적이 있는 곳은 회색으로 바꾸고 현재 사용자가 머물고 있는 곳은 빨간색으로 표시하고 싶다.
step 1. 모든 a 태그의 컬러를 black으로 지정( color:black;)
step 2. 봤던 페이지에 대한 정보 주기: style="color:gray;"복붙하는 건 중복이 발생한다. (회색으로 바뀌긴 함)
HTML과 CSS를 그룹으로 묶어 폰트 컬러를 바꾸어주자.
class="saw" : html 임.
saw라는 class값을 가진 모든 태그에 대해 폰트 컬러를 그레이로 주자.
그런데, 확인해보면 회색이 아닌 검은색이 뜨는 것을 볼 수 있다.
그 이유는 saw 가 웹페이지에 있는 모든 saw라는 이름의 태그를 선택하는 선택자이기 때문이다.
class 값인 saw인 태그인데 그 때 사용하도록 약속된 게 점( . )
saw 앞에 점을 붙이면 웹 페이지에 있는 모든 class가 saw인 태그를 가리키는 선택자로 바뀐다.
그러면 색이 회색으로 바뀐 것을 알 수 있다.
class 는 하나로 묶는 것이다.
step 3. 현재 머물고 있는 페이지에 빨간색으로 표시하고 싶을 때: saw 다음에 active 라고 써주고
.active{
color:red;
}
라고 써준다.
---> class라는 속성의 값은 여러 개의 값이 들어올 수 있고(saw, active 등) 띄어쓰기로 구분한다.
---> 하나의 태그에는 여러 개의 속성이 들어올 수 있고 (a href =..) 여러 개의 선택자(.saw, .active)를 통해서 하나의 태그를 공동으로 제어할 수 있다.
-------------> a 태그는 두 개의 클래스인 .active 와 .saw 에 영향을 받고 있다.
***** 보다 가까이에 있는 명령이 더 큰 영향력을 갖는다. *****
(위에서부터 보는 게 아님..)
1. .active와 .saw를 바꾸고 CSS에 class="saw" id="active"로 두자.
2. id 값이 acitve인 것을 찾고 싶은 경우 active를 #active 로 바꾸자.
결과: .saw보다 #active가 뒤로 있어도 붉은 색의 CSS가 뜬다.
따라서,
- ID 선택자(#active)와 클래스 선택자(.saw)가 붙으면 ID 선택자가 이긴다.
- 클래스 선택자(.saw)와 태그 선택자(a {}) 가 붙으면 클래스 선택자가 이긴다.
ex) a, #active, .saw 순에서 #active, .saw , a 순으로 바꾸면 변화가 없다.
---> 태그 선택자가 가장 약하고 클래스 선택자가 그 다음, id 선택자가 강하다.
---> 다 같은 클래스 선택자라면 가장 마지막에 등장하는 선택자가 우선순위가 높다.
Q. 왜 태그 선택자와 클래스 선택자와 ID 선택자가 있다면 ID 선택자, 클래스, 태그 순으로 강한가?
A. ID 선택자의 값이 active인 태그가 웹 페이지에 한 번 등장하면 active는 더 이상 사용하면 안 된다.
ID 의 값은 오직 한 번만 사용해야 한다. (유일무이)
태그 선택자가 id 선택자보다 포괄적이다. 구체적인 것을 포괄적인 것보다 우선순위를 높였다.
그래야 태그 선택자를 통해 전체적인 디자인을 하고 예외적인 것들의 ID를 찍어가며 ID 선택자를 통해
예외를 두는 게 효율적이다. 태그 선택자와 ID 선택자 사이에 클래스라는 중간 정도 우선순위의 선택자가 있다.
css selector)
element는 태그와 같은 뜻이다. select all <p> elements = 모든 p 태그를 선택한다.
id="firstname" = id 값이 firstname 인 태그를 선택한다.
. 이 붙으면 class 선택자이다.
선택자들을 조합해서 타겟팅할 수 있고 코드의 양을 줄일 수 있다.
<h1> 사용했더니 줄바꿈 되었다. 그런데 a 태그는 똑같은 태그인데도 줄바꿈되지 않고 같은 태그에 존재.
제목 태그는 화면 전체를 쓰는 게 편리하다. 링크를 화면 전체로 쓰면 불편하므로 링크는 자기 콘텐츠 크기만큼만 사용한다.
모든 h1에 대해 테두리(border), 두께 설정, 테두리의 색, 스타일(단선-solid,점선 등)을 정해주자. --부피 찾아보기
h1 태그는 화면 전체를 쓴다.
a 태그에도 붙여보자.
화면 전체를 쓰지 않고 자기 콘텐츠만큼의 부피를 사용한다.
화면 전체를 쓰는 태그 = block level element (+ /* 내용 */ 은 주석을 의미한다.)
자기 자신의 부피, 콘텐츠 크기만큼 갖는 태그 = inline element
- block level element를 inline 처럼 쓰고 싶은 경우 display:inline; 속성 이용.
- inline element를 block 처럼 쓰고 싶은 경우 display:block; 이용
tip. 태그 안 보이게 하고 싶으면 display:none;
(border-width:5px;
border-color:red;
border-style:solid; ) 이 부분이 중복. 중복을 제거하자.
h1, a 사용.-> ' , '로 코드의 양 줄일 수 있다.
그래도 'border'은 중복이다. 여기도 중복을 없애주자.
border:5px solid red; 로 바꿔주자. (순서는 상관 없다.)
콘텐츠와 테두리 사이에 여백을 주고 싶은 경우: padding:20px를 해보자.
콘텐츠와 테두리 사이 간격이 늘어난다.
테두리와 테두리 사이의 간격 없애고 싶은 경우: margin:0;
margin:20px; 로 지정하면 20px 만큼 테두리가 떨어진다.
h1 태그는 block level element가 생략된 상태. 화면 전체를 쓰는 것을 바꾸고 싶다면 width:100px; 를 사용
웹페이지에서 검사 항목을 눌러보자.
<h1>css</h1>누른 후 style 누르면 h1태그가 어떤 css 스타일의 영향을 받고 있는지 일목요연하게 보여준다.
아래 표에서 누르면 각 해당하는 부분이 표시된다.
정리) CSS 박스 모델
- 화면 전체를 쓰는 것이 block level element
- 자기 크기만 갖는 것을 inline element
- 콘텐츠 크기를 지정할 때 폭은 width, 높이는 height 값 지정
- 콘텐츠와 바깥쪽에 있는 테두리 사이의 간격은 padding
- 테두리와 테두리 사이는 margin 값
- web 아래 밑줄 긋는 방법
테두리를 사용해서 h1태그에게 테두리 주기
저렇게 말고 아래쪽 테두리만 원하는 경우 border-bottom: 사용
위치가 조금 애매한 것 같으니..
- 웹페이지 검사버튼-개발자도구 클릭
- h1 태그를 선택했을 때 색상을 보면 파란색 바깥쪽 황토색은 누구로 인해서? margin 때문
-> h1 태그의 margin 값을 0으로 바꾸어주고, 검사버튼에서 확인해보면 다 바뀐 것을 볼 수 있다.
테두리랑 web 사이 간격이 너무 없으니까 만들어주기 위해 패딩값까지 설정해주면
가로 줄은 <ol>태그가 가지고 있다.
ol{
border-right:1px solid gray;
}
를 하면
web 아래 1,2,3 번 오른쪽 끝에 선이 하나 생긴다.
ol 태그는 block level element라서 element의 끝에 오른쪽 테두리가 있다.
ol 태그 밑에 width 지정
가로선과 세로선 사이에 여백이 있는 이유는 ol 태그가 margin 값이 있기 때문이다. margin 값을 없애주자.
그런데 리스트 1,2,3이 너무 붙어있다. ol 태그에 padding 값을 주자.
가로선 양 쪽에 여백이 있는 이유는 body 태그에 margin 값이 있어서이다.
body{
margin:0;
}
써주자.
화면 전체를 꽉 채운다.
밑에 있는 정보를 위쪽으로 올리는 작업을 하면 끝이다.