<style> HTML의 시작을 알림
cf.<style> 자체는 html
</style>
웹브라우저는 원칙적으로 HTML을 읽음
CSS는 전혀 다른 문법으로, 웹에 적용하기 위해 HTML 식 (style 태그 안)으로 적어줘야 함.
HTML이 정보의 기능에 집중할 수 있게 하기 위해
CSS가 디자인을 전담하는 게 훨씬 효율적이기 때문에
웹페이지의 유지 보수의 효과, 가독성을 위해 CSS 사용 필수
웹페이지에 CSS를 사용하는 법
1. <style> 태그
a { color : black; } //효과 혹은 declaration(선언)이라고 한다. a라고 이미 지정했기 때문에 선택자를 사용할 필요가 없다.
2. style 속성
<a href=2.html style = "color:red" > CSS </a>
style→웹브라우저가 CSS로 해석함 //style은 CSS, "color:red"라는 속성은 HTML의 속성
효과를 지정하려면 항상 끝에 ;을 넣어야 한다. 세미콜론으로 구분함으로써 한줄에 있어도 기능
<style>
a {
color:#3B3838; /*CSS에서는 폰트 색 그냥 color */
text-decoration: none; /*꾸미는 게 없다. 밑줄 사라짐*/
}
h1 {
font-size: 45px;
text-align: center;
}
</style>
</head>
<body> <!--본문 시작-->
<h1> <a href="index.html"> WEB </a></h1>
<ol>
<li> <a href="1.html"> HTML </a> </li>
<li> <a href="2.html" style ="color:red; text-decoration: underline"> CSS </a> </li>
<li> <a href="3.html"> JavaScript </a> </li>
</ol>
a { color:red; }
a - Selector(선택자) | color:red; - Declaration(선언, 효과)
color - Property(속성) | red - Value(값)
검색방식 예시 : css text size property
Property 암기할 필요 없음, 자동완성되고 검색 금방 할 수 있으니까
Selectors
선택자와 우선순위 (태그<class<id)
구체적인 것의 우선순위가 높다
element(태그) 선택자 - 태그명 { }
가장 포괄적
class 선택자 - .클래스명 { }
그루핑에 용이
id 선택자 - #아이디명 { }
id 선택자는 유일하기 때문에, 중복해 사용해선 안된다
유일하기 때문에 css를 적용할 때 #id이름으로 적으면 된다(상위그룹 적지 않아도 됨)
폰트 색을 다르게 주기
방문한 적 있는 링크 | 방문한 적 없는 링크 | 현재 방문한 링크를 나누어 색깔을 달리하고 싶을 때,
class로 그루핑 가능, <sylte> 에는 .클래스명{ }
class : 여러개의 속성이 올 수 있고 여러 개의 속성으로 하나의 태그를 공동 제어 가능. 띄어쓰기로 구분한다 ex. class = "saw active"
.saw{ color:gray; }
.active{ color:red; }
</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>
그러나 별로 좋지 않은 방식, class로만 쓰기 보다는 <우선순위를 이용하는 게 낫다>
박스모델
블럭레벨 태그
(block level element)
제목(h) : 화면 전체를 쓰는 게 편리하기 때문에 자동 줄바꿈
인라인 태그
(inline element)
링크태그(a) : 앞뒤로 줄바꿈하면 불편하기 때문에 줄바꿈하지 않음
그러나 블럭/인라인이라는 속성은 기본값일 뿐,
CSS(그중에서도 display 속성으로)를 통해 언제든 변경 가능
cf. display:none - 태그를 안보이게 하고 싶을 때
<style>
/*block level element*/
h1{
border-width:4px;
border-color:red;
border-style: solid; /*단선, 일반적인 선*/
display: inline;
display: none;
}
/*inline element*/
a{
border-width:4px;
border-color:red;
border-style: solid; /*단선, 일반적인 선*/
display: block;
}
</style>
중복을 제거하는 방법
순서는 중요하지 않음
h1, a{ border: 5px solid red; }
h1, a{
border: 5px solid red;
padding:20px; /*컨텐트와 테두리 사이 간격*/
margin:20; /*테두리와 테두리 사이의 간격*/
display:block; /*화면 전체를 씀*/
width:100px; /*화면 전체 쓰고 싶지 않다면 width를 고정*/
/*높이는 height*/
}
테두리를 이용해서 구역을 나누는 법(선을 그리는 법)
border-bottom:1px solid gray;
웹의 검사-Elements를 확인해가며 조절
margin:0;
padding:20px;
h1 {
font-size: 45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
세로 선을 주기 위해 요소 확인해보았더니 ol
→ ol의 border-right 줌
→ ol 태그는 블럭태그로 화면 끝에 테두리가 생기기 때문에 width 지정
→ 여백이 불필요하게 크기 때문에 margin 없앰
→ content끼리 간격이 너무 좁아 padding
선을 주었는데 화면 끝까지 닿지 않음. 확인해보니 body의 margin : 0으로 수정
body{
margin:0; /*화면 전체를 쓰면서 선을 끝까지 닿게 하기 위해*/
}
ol{
border-right:1px solid gray; /*ol태그는 블럭태그라 테두리를 주면 기본적으로 화면 끝에 온다 따라서 변경 위해width값을 지정해야 */
width:100px;
margin:0; /*너무 여백이 커서 없앰*/
padding:20px; /*컨텐트랑 떨어뜨리기 위해*/
}
디자인의 용도로 쓰는 태그
즉, 의미가 없음 (h1을 쓰면 제목이라는 의미가 되니까)
그리드를 사용할 때 두번째 셀의 내용이 많으면, 첫번째 셀도 크기가 같이 커짐
<div>
블럭레벨 태그
<span>
인라인레벨 태그
그리드
그리드를 만들기 위해
① 해당 태그들을 감싸는 부모태그 필요 (div태그 활용)
② 선택자 style 선언<style>
display:grid;
grid-template-columns: ~px 1fr;
1fr : 크기 자동조절
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title> 그리드 </title>
<style>
div{
border:5px solid gray;
display:grid;
grid-template-columns: 150px 1fr; /*navigation은 150px고정, article 공간은 나머지 공간 다씀*/
}
#grid{
border:5px solid pink;
}
</style>
</head>
<body>
<div id="grid"> <!--그리드를 만들기 위해 둘을 감싸는 부모태그 필요-->
<div> NAVIGATION </div>
<div> ARTICLE Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad enim delectus reiciendis tempora expedita eligendi commodi corporis consectetur quasi nulla totam eaque doloribus iusto ipsam, voluptate sequi esse placeat quis?</div>
</div>
</body>
</html>
CSS,HTML,자바스크립트 기술들을 현재 얼마나 채택하고 있는가
빨강 - 지원X, 초록색 - 동작 가능, 황녹색-부분적 지원
#grid ol{ }
* 선택자 ol 그냥 바로 쓰지 않고 앞에 #grid를 붙여주는 이유는 grid라는 아이디를 가진 태그 안에 속한 ol이라는 점을 명시하기 위해서
<!doctype html>
<html>
<head>
<title> WEB1 - html</title>
<meta charset="utf-8"> <!--문서를 읽는 방식 결정, 한글 깨짐 방지-->
<style>
body{
margin:0; /*화면 전체를 쓰면서 선을 끝까지 닿게 하기 위해*/
}
h1 {
font-size: 45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray; /*ol태그는 블럭태그라 테두리를 주면 기본적으로 화면 끝에 온다 따라서 변경 위해width값을 지정해야 */
width:100px;
margin:0; /*너무 여백이 커서 없앰*/
padding:20px; /*컨텐트랑 떨어뜨리기 위해*/
}
a {
color:balck;
/* color:#3B3838; CSS에서는 폰트 색 그냥 color */
text-decoration: none; /*꾸미는 게 없다. 밑줄 사라짐*/
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{ /*부모가 grid인 ol을 선택*/
padding-left:33px;
}
#grid #article{ /*article은 id값이기 때문에 그냥 #article이라고 써도 되지만, 좀더 그리드라는 의미 분명하게 주기위해 둘다 씀*/
padding-left:25px;
}
</style>
</head>
<body> <!--본문 시작-->
<h1> <a href="index.html"> WEB </a></h1>
<div id="grid">
<ol>
<li> <a href="1.html"> HTML </a> </li>
<li> <a href="2.html"> CSS </a> </li>
<li> <a href="3.html"> JavaScript </a> </li>
</ol>
<div id="article">
<h2> HTML </h2>
<p><a href = "https://www.w3.org/TR/html5/" target="_blank" title ="html5 specification">
Hypertext Markup Language(HTML)</a> is the standard markup language for <strong> creating <u>web</u>pages</strong>
and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.
HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
</p>
</div>
</div>
</body>
</html>
미디어쿼리
어떤 조건이 만족할때만 CSS의 내용이 동작
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>미디어쿼리</title>
<style>
div{
border:5px solid green;
font-size:60px;
}
@media(max-width:800px){
div{
display:none;
}
}/*{최소 폭이 800이라면*/
</style>
</head>
<body>
<div>
Responsive <!--보였다 숨겼다 하기위해 div로 감쌌음-->
</div>
</body>
</html>
반응형 웹의 기본
@media(max-width:800px){
#grid{
display: block; /*800보다 화면이 작을 때 그리드없앰*/
}
ol{
border-right: none;
}
h1{
border-bottom:none;
}
}
하나의 웹페이지에서 여러개의 파일을 별도로 바깥에 두고 다운로드
vs
웹페이지 안에 CSS 저장
네트워크 측면에선 두번째가 더 효율적(트래픽이 덜든다)
그러나 '캐싱'으로 인해 첫번째가 더 효율적이다 (클라이언트 컴퓨터에 저장)
따라서 여러 상세페이지들이 중복된 레이아웃을 가진다면, CSS를 별도의 파일로 만들고 가져오는 것이 효율적이다.
<link rel="stylesheet" type="text/css" href="style3.css">
float
 이미지 왼쪽에 여백 없이 텍스트를 주고 싶을 때 활용 |
 img { float=right } |
 |
nav{ //오른쪽 테두리 border-right:1px solid gray; width:200px; //폭 height:600px; //높이(테두리) float:left; //왼쪽으로 } |
 |
nav ol{ list-style:none; } article{ float:left; //nav 옆으로 padding:20px; //테두리와 간격 } |
CSS 활용
Chrome 웹스토어 - stylebot
자주 가는 웹사이트의 레이아웃을 바꿔서 볼 수 있음
'FRONT-END' 카테고리의 다른 글
| 생활코딩 HTML 요약 (0) | 2021.04.21 |
|---|---|
| 개요 (0) | 2021.04.05 |
