웹개발 2차시 CSS
<body> 본문내용 </body>
<style> 디자인 </style>
<style>
a {
color : red;
text-decoration : none;
}
</style>여기서 a 를 선택자(selector) 라고 부름.
또는 본문 내용안에 style 속성으로 직접 작성 가능
<li><a href = "2.html" style="color:red; text-decoration:underline">CSS</a></li>
+) css 파일을 따로 저장하여
<head>
<title>WEB1 - CSS </title>
<meta charset="uft-8">
<link rel="stylesheet" href="style.css">
</head>css 파일을 링크 걸어주면 파일별 수정 용이!
<속성>
글 디자인
h1{
font-size: 45px;
text-align: center;
}+) 검색하는 방법:
글씨크기를 변경하고싶다 -> css text size property 검색
글씨를 중앙정렬하고싶다 -> css text center property 등 검색가능
<선택자>
<body>
<h1><a href = "index.html"></a>WEB</h1>
<ol>
<li><a href = "1.html" class="saw">HTML</a></li> //class 지정
<li><a href = "2.html" class="saw active">CSS</a></li> //class 지정
<li><a href = "3.html">JavaScript</a></li>
</ol>
</body>
<style>
a{
color : black;
text-decoration: none;
}
h1{
font-size: 45px;
text-align: center;
}
.saw{
color:gray;
}
.active{
color:red;
}
</style>html에서 a태그에 class를 지정해주고,
style에서 .saw 라고 해주면 html에서 class가 saw인것 모두 지정.
class는 여러개의 값이 들어올 수있고, 띄어쓰기로 구분!
class = "saw active" 라고 지정해주면 saw라는 class, active라는 class 두개 다 가능
※ class = "saw active" -> .saw 와 .active 모두 해당된다는 불편함 발생
-> id 사용
<body>
<h1><a href = "index.html"></a>WEB</h1>
<ol>
<li><a href = "1.html" class="saw">HTML</a></li>
<li><a href = "2.html" class="saw" id="active">CSS</a></li>
<li><a href = "3.html">JavaScript</a></li>
</ol>
</body>
<style>
a{
color : black;
text-decoration: none;
}
h1{
font-size: 45px;
text-align: center;
}
#active{
color:red;
}
.saw{
color:gray;
}
</style>class = "saw" id = "active"
-> id가 class보다 더 우선시됨!
why? id 중복불가능, class 중복가능. (id가 더 구체적)
<박스모델>
<body>
<h1>HTML</h1>
<p>
인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은
<a href = "https://ko.wikipedia.org/wiki/HTML">HTML</a>로 작성된다.<br>
HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다.
</p>
</body>
<style>
h1, a{ /*중복되는것 한번에 적기 가능*/
border-width: 5px;
border-color:red;
border-style:solid;
<!--border: 5px solid red;--> /*중복 한번에 가능*/
}
</style>
화면 전체를 쓰는 태그 : 블록 레벨 엘리먼트(block level element)
자기자신만큼만 쓰는 태그 : 인라인 엘리먼트(inline element)
-> css를 통해 바꿀 수 있음
<body>
<h1>HTML</h1>
<p>
인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은
<a href = "https://ko.wikipedia.org/wiki/HTML">HTML</a>로 작성된다.<br>
HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다.
</p>
</body>
<style>
h1{
border-width: 5px;
border-color:red;
border-style:solid;
display:inline; /*display 추가*/
}
a{
border-width: 5px;
border-color:red;
border-style:solid;
display: block; /*display 추가*/
}
</style>
</html>
padding, margin
<body>
<h1>CSS</h1>
<h1>CSS</h1>
</body>
<style>
h1{
border: 5px solid red;
padding: 20px; /*박스 안에서의 간격*/
margin: 0; /*박스끼리의 간격*/
width: 100px; /*원래 블럭이었지만, 간격 지정*/
}
</style>
<그리드>
디자인을 위한. 의미없는 태그
- <div></div> : 블록태그. 줄바꿈됨.
- <span></span> : 인라인태그.
두개의 태그를 옆으로 나란히 붙이고 싶다면?!
1. 우선 붙이고 싶은 것들을 부모태그로 한번 더 묶어줌
<body>
<div id="grid"> //부모태그로 한번 더 감싸주기
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
<style>
#grid{
border: 5px solid pink;
}
div{
border: 5px solid gray;
}
</style>
</html>
2. 부모태그 css를 display: grid로 설정해주고
3. 원하는 사이즈 지정
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
<style>
#grid{
border: 5px solid pink;
display:grid; /*우선 그리드로 설정해주고*/
grid-template-columns: 150px 1fr; /*첫번째 150px, 나머지 자동화*/
}
div{
border: 5px solid gray;
}
</style>
if) grid-template-columns: 2fr 1fr
-> 앞은 2만큼, 뒤는 1만큼의 크기를 갖도록 자동조정
<body>
<h1><a href = "index.html"></a>WEB</h1>
<div id="grid"> //id 지정
<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>CSS</h2>
<p>
기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다.<br>
HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
</p>
</div>
</div>
</body>
<style>
body{
margin: 0px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
a{
color : black;
text-decoration: none;
}
h1{
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0;
padding: 20px;
}
#grid ol{ /*#grid를 부모로 가지는 ol라고 명확하게 표시*/
border-right:1px solid gray;
width: 100px;
margin: 0;
padding: 20px;
padding-left: 33px;
}
#article{
padding-left:25px;
}
</style>
현재 웹브라우저들이 그 기술들을 얼마나 채택하고 있는가를 보여주는 사이트:
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
<미디어 쿼리>
반응형 디자인 : 화면의 크기에 따라 웹 페이지의 모양 바뀌는것
<body>
<div>
Responsive
</div>
</body>
<style>
div{
border: 10px solid green;
font-size: 60px;
}
@media(min-width: 800px){ /*800px보다 화면이 크다면*/
div{
display:none;
}
}
</style>
<다음 사이트를 미디어쿼리를 사용해 조정>
<style>
/*screen width < 800px*/
@media(max-width: 800px){
h1{
border-bottom:none;
}
#grid{
display: block /*grid에서 원상복구*/
}
#grid ol{
border-right: none;
}
}
</style>