WEB2 - CSS
CSS 등장 이전의 상황
웹페이지를 아름답게 만드는 방법에 깊은 고민에 빠짐
쉽지만 한계가 있는 방법 어렵지만 근본적인 해결이 있는 방법
html에 디자인에 대해 새로운 태그를 추가하는 쉬운 일 과
css라는 새로운 언어를 만드는 일
디자인을 위한 태그(지금은 안씀)
font 태그는 정보가 없고 양이 많아지면 수정하기 힘들다
CSS의 등장
<style>
a {
color:red;
}
</style>수정하기가 용이함 중복코드가 없어짐(font태그는 여러개써야하지만 css를 사용하면 중복이 제거됨) 유지보수가 쉽고 가독성이 좋아짐 style이라는 태그에 갇혀있어 디자인과 관련된 부분을 분석하지 않아도됨 html이 정보에 집중하기 위해 css로 하는것이 효율적이다
혁명적 변화
html에 스타일 적용하는 방법 2가지
style태그를 쓴다
style 속성을 쓴다
속성을 이용하여 디자인하기
<a href="2.html" style="color:red">CSS</a>style이라는 속성사용
밑줄 없애기
text-decoration: none;
text-decoration: underline;
이론적으로 정리
CSS 속성을 스스로 알아내는 방법
구글링하면 다 나옴
CSS 선택자를 스스로 알아내는 방법
선택자에 대한 토대
class="" 지정
<style>
.saw{
color:gray;
}
.active{
color:red;
}
</style>
<a href="1.html" class="saw">HTML</a>
<a href="2.html" class="saw active">CSS</a>별로 좋은 태그는 아니다
그리고 saw active 순서를 바꾸면 CSS는 빨간색으로 안변함
권력이 같으면 가장 최근에 명령한 것이 가장 영향력이 크다.
ID 선택자가 가장 우선순위가 높다
아이디 선택자와 클래스 선택자 중에 아이디 선택자가 먼저다
<style>
#active{
color:red;
}
.saw{
color:gray;
}
</style>
<a href="1.html" class="saw">HTML</a>
<a href="2.html" class="saw" id="active">CSS</a>
#active가 .saw보다 뒤에 등장했음에도 #active가 적용된다
아이디>클래스>태그
아이디 선택자는 태그 값이 중복X 여러번 쓸 수 없다->뭔소리진 모르겠음
박스모델
화면 전체를 쓰는 태그 = Block level element
화면 부분을 쓰는 태그 = inline element
display로 기본값을 변경할 수 있다
팁! 태그들을 안보이게 하고 싶을 때 display:none; 을 하면 화면에서 안보임
코드 중복 줄이기
패딩: 컨텐츠와 테두리 사이에 여백을 주는 것
마진: 테두리와 테두리 사이의 간격
박스 크기를 지정하기 태그의 크기가 변경된다
웹페이지 우클릭 후 검사 -> 코드를 볼 수 있음
css box model
그리드
div: 용도가 없는 디자인을 위한 태그 기본적으로 block level element여서 화면 전체를 사용한다
span: div와 같은 목적으로 사용 가능 inline element
div 태그 두개를 나란히 배치하기 위해서는 부모 태그가 필요하다
grid-template-columns: 150px 1fr;
nav는 150px로 고정 arc은 나머지 영역을 자동커지고 작아짐 자동적으로 움직임
추천 사이트:can i use
그리드 써먹기
<style>
body{
margin:0;
}
a{
color:black;
text-decoration: none;
}
h1{
font-size: 45px;
text-align: center;
border-bottom: 1px solid pink;
margin:0;
padding: 20px;
}
ol{
border-right: 1px solid blue;
width: 100px;
margin:0;
padding: 20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr; /*ol div id=article*/
}
#grid ol{
padding-left: 33px;
}
#grid #article{
padding-left: 25px;
}
</style>
<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>CSS </h2>
<p><a href="https://ko.wikipedia.org/wiki/CSS" target="_blank" title="css">css</a>종속형 시트 또는 캐스케이딩 스타일 시트(영어: Cascading Style Sheet)</p>
<p style="margin-top:40px;">
마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(영어: Style sheet language 스타일 시트 랭귀지[*])로[1],
HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이고, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
</p>
</div>
</div>
</body>
반응형 디자인과 미디어 쿼리
반응형 웹(responsive web): 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것
웹은 모든 시스템에서 동작함
여러가지 화면에 적용하기 해야 한다.
화면의 크기에 따라 디자인이 다름
미디어 쿼리: 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문이다
screen width > 800px
스크린의 크기가 800px 보다 크다면
@media(min-width:800px){
div{
display:none;
}
}주석처리는 내가 쓴 답
코드의 재사용
<link rel="stylesheet" href="style.css">