퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
제대로 배워보는 html과 css, 그리고 웹표준 5. css 기초
5.1 html 문서에 css 적용하기, css 연결하기
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
h1 {
color: red;
background-color: lime;
}
</style>
</head>
<body>
<h1>css basic</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore, deserunt corrupti, placeat nesciunt voluptate mollitia ipsum est, accusantium blanditiis labore ipsam molestiae ea sit. Laboriosam maxime vel, quae! Deserunt. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa corporis quaerat fugiat! Voluptatum assumenda, natus eum atque vero eius laborum quibusdam! Mollitia ea doloribus id nisi! Aperiam, saepe. Rem, eveniet.</p>
</body>
</html>
문서 안에 css 스타일을 지정하는 방법.
보통은 따로 css 파일을 빼서 쓴다.
따로 css 폴더를 만든다.
/*
css 주석처리
*/
p {
background-color: lightblue;
}css 파일을 저렇게 만들고, html에서 link 태그로 연결한다.
<link rel="stylesheet" type="text/css" href="css/style.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- @import "css/style.css"; -->
<style type="text/css">
@import url(css/style.css);
h1 {
color: red;
background-color: lime;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
</head>위와 같은 방식도 가능하다.
html로 할 때는 link로 하는 게 더 안정적이다.
<body>
<h1 style="border-bottom: 5px solid blue">css basic</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore, deserunt corrupti, placeat nesciunt voluptate mollitia ipsum est, accusantium blanditiis labore ipsam molestiae ea sit. Laboriosam maxime vel, quae! Deserunt. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa corporis quaerat fugiat! Voluptatum assumenda, natus eum atque vero eius laborum quibusdam! Mollitia ea doloribus id nisi! Aperiam, saepe. Rem, eveniet.</p>
</body>
태그 안에 바로 넣을 수 있긴 한다. 별로 좋은 점은 아니다.
/*
css 주석처리
*/
@charset "UTF-8";
p {
background-color: lightblue;
}css 파일에도 위 언어처리를 해 주는 것이 좋다.
5.2 css값, 길이와 색상 알아보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- #f00도, #ff0000도 가능 -->
<!-- rgb(255, 0, 0); 과 같은 형식도 가능 -->
<!-- rgb(10%, 50%, 40%)와 같은 형식도 가능 -->
<!-- hsl(0, 100%, 50%)와 같은 형식도 가능.
H는 색상환(0~360), s는 채도, l은 명도 -->
<!-- rgba(255, 00, 0, .6); 나 hsla로 투명도를 지정 가능 -->
<style>
body {
background: url(img/bg.jpg);
}
h1{
color: rgba(255, 0, 0, .6);
font-size: 10em;
}
p {
width: ;
background-color: lime;
}
</style>
<!-- 길이에 px, em, %를 많이 쓴다 -->
<!-- px는 화질에 상대적, 윈도우 크기엔 절대적,
em은 폰트 높이에 따라 상대적,
만약 font-size: 12px라고 하면 em은 12*5가 되는 것
%는 브라우저, 해당 태그가 감싸고 있는 영역에 상대적인 값
rem도 글자 크기에 비례하긴 하지만 html {}에서 지정한 폰트 크기를 기준으로만 계산한다.
-->
}
<!-- 1em이 기본 한 글자 크기 -->
</head>
<body>
<h1>css basic</h1>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Modi numquam voluptatibus magni eum nulla blanditiis itaque vitae quod officiis ad, consequuntur, laudantium. Eos fuga voluptas sunt pariatur hic expedita magnam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
5.3 css 선택자와 선택자의 우선순위
css는 상속 개념이 있다.
.은 class 선택자!
id는 고유한 이름이며, #가 클래스 선택자이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body {
font-size: 12px;
}
h1, p{
text-decoration: underline;
}
p.lead {
color: green;
}
#lead {
background-color: lime;
}
#header p { /* 자손 선택자 */
border: 3px solid black;
}
/* #header > p 이렇게 하면 자식 선택자,
바로 아래 있는 것만 인식된다 */
.list li + li {
background-color: lightblue;
}
/* li 바로 다음에 있는 li, 인접 형제 선택자 */
#header p + p {
background-color: yellow;
}
/* title 속성이 있는 태그 */
a[title] {
background-color:purple;
color: white;
}
a[href ^= 'http://'] {
background-color: black;
color: yellow;
}
/* = 딱 같은 값
^= 해당 텍스트로 시작하는 값
$= 어떤 속성으로 끝나는 값
*/
li[title ~= 'text'] {
background-color: black;
}
/* ~=는 특정 단어(띄어쓰기로 구분된 완전한 단어) 포함되는지
*= 일부만 있어도 포함 여부 인식함
*/
li[lang |= "en"] {
border-bottom: 2px solid red;
}
/* 지정된 속성만을 갖는 걸 찾는다. */
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>css selector</h1>
<p id="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, totam harum quod dignissimos quis beatae.</p>
<p id="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, totam harum quod dignissimos quis beatae.</p>
</div>
<div id="content">
<p id="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, totam harum quod dignissimos quis beatae.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias quo, ad autem excepturi repellendus beatae quis aliquam, non voluptatem atque commodi tempora eius facere quae qui fuga. Repellat, est, minima.</p>
<ol>
<li lang="en">Lorem, ipsum dolor sit amet consectetur, adipisicing elit.</li>
<li lang="zh">Lorem, ipsum dolor sit amet consectetur, adipisicing elit.</li>
<li lang="ja">Lorem, ipsum dolor sit amet consectetur, adipisicing elit.</li>
<li>Lorem, ipsum dolor sit amet consectetur, adipisicing elit.</li>
<li>Lorem, ipsum dolor sit amet consectetur, adipisicing elit.</li>
</ol>
<ul>
<li><a href="http://daum.net/">daum</a></li>
<li><a href="http://naver.com/">naver</a></li>
<li><a href="mailto:help@host.co.kr" title="help mail">help</a></li>
<li><a href="file/download.pdf">download</a></li>
<li title="some text sample">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, voluptatibus!</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, ipsam. Sit dolorum, asperiores quidem quis!</p>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link {
color: green;
text-decoration: underline;
}
a:visited {
color: gray;
text-decoration: underline;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color:orange;
text-decoration: underline;
}
a:focus {
background:red;
}
/* focus는 tab 키로 갔을 때 주로 */
/* 위 순서대로 쓰는 것이 좋다. */
</style>
</head>
<body>
<h1>css selection</h1>
<p><a href="#">Lorem ipsum dolor</a>sit amet consectetur adipisicing elit. Iure eum libero quod, sed aut similique, eveniet rerum perferendis aperiam culpa quo voluptatem ipsum. Alias voluptate cumque, eum. Unde, magni, officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti sint necessitatibus delectus saepe esse veniam ab, exercitationem, sunt corporis laboriosam, sed molestiae animi obcaecati, provident itaque ullam quos. Excepturi, eligendi.<a href="">Nobix invenroe illum pariatur esse magni.</a></p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link {
color: green;
text-decoration: underline;
}
a:visited {
color: gray;
text-decoration: underline;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color:orange;
text-decoration: underline;
}
a:focus {
background:red;
}
/* focus는 tab 키로 갔을 때 주로 */
/* 위 순서대로 쓰는 것이 좋다. */
.lead:first-line {
background-color:lime;
}
/* first-letter도 있다 */
h1:before{
content: 'Before area ';
color: blue;
}
h1:after{
content: 'After area';
color: red;
}
div {background-color: lime}
.sample {background-color: green;}
/* 밑에 있을수록 우선순위가 높아진다. */
/* type은 1, class는 10, id는 100숫자가 높을 수록 높은 우선순위. */
/* 여러개를 겹쳐 써서 우선순위를 높게 할 수 있다 */
/* inline 스타일이 제일 우선순위가 높긴 하다 */
/* 우선순위를 무시하고 {} 안 쪽 마지막에 !important를 하면 무조건 적용되는 값이 된다 */
</style>
</head>
<body>
<h1>css selection</h1>
<p class="lead"><a href="#">Lorem ipsum dolor</a>sit amet consectetur adipisicing elit. Iure eum libero quod, sed aut similique, eveniet rerum perferendis aperiam culpa quo voluptatem ipsum. Alias voluptate cumque, eum. Unde, magni, officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti sint necessitatibus delectus saepe esse veniam ab, exercitationem, sunt corporis laboriosam, sed molestiae animi obcaecati, provident itaque ullam quos. Excepturi, eligendi.<a href="">Nobix invenroe illum pariatur esse magni.</a></p>
<div vlass="sample">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt iure fugit quia nostrum placeat molestias quisquam culpa atque molestiae dolor?
</div>
</body>
</html>'개발 공부 > html & css' 카테고리의 다른 글
| 제대로 배워보는 html과 css, 그리고 웹표준 7. 테이블~8. 배치 스타일 (0) | 2020.09.11 |
|---|---|
| 제대로 배워보는 html과 css, 그리고 웹표준 5. 폰트~6. 배경 스타일 (0) | 2020.09.10 |
| 제대로 배워보는 html과 css, 그리고 웹표준 4. 웹페이지 코딩 실습 (0) | 2020.09.09 |
| 제대로 배워보는 html과 css, 그리고 웹표준 3.각종 html요소 알아보기 (0) | 2020.09.09 |
| (New) 퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준 1. 설치~2.html작성기초 (0) | 2020.07.09 |
