https://www.youtube.com/playlist?list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B
WEB2-CSS
www.youtube.com
생활코딩 강의를 보고 개인적으로 정리한 글 입니다
CSS = 디자인을 위한 것
<style> : 값이 반드시 css 속성이 온다는 html코드
a : 웹 페이지에서 주고 싶은 속성을 선택 == selector 선택자라고 한다
{ } : declariation (선언)
color:“black” : (Property Value)
<style>
a { color:black; }
</style>
글자 사이즈 키우기
div.a {
font-size: 15px;
}
div.b {
font-size: large;
}
div.c {
font-size: 150%;
}
문단(글자)을 중앙으로 정렬하기
div.a {
text-align: center;
}
왼쪽으로 정렬
div.b {
text-align: left;
}
오른쪽으로 정렬
div.c {
text-align: right;
}
양쪽으로 정렬
div.c {
text-align: justify;
}
class=“saw” 생성
.saw {
color:gray;
} //선택자 앞에 ‘.’을 붙여야 class 인식
css 특징 : 순서에 따라 변경 순서가 바뀐다, 보다 가까이에 있는 명령을 듣는다
해결법 -> id값을 선언
id=“active”
#active // ‘#’을 붙여야 함
**id의 값은 단 한 번만 등장해야 한다***
->구체적인 것이 포괄적인 선택자보다 우선순위가 높다
tag와 element
<p></p> : tag
<p>이것은 문단입니다.</p> : element
->내용을 포함해 시작태그와 종료태그까지를 엘리먼트라고 한다.
**이런것도 엘리먼트에 속한다
<br />
빈요소(empty element)라고 하여 내용이 없는 경우를 말하며 <hr />, <img />와 같은 것들이 있다
박스모델 : 테두리 정하기
border-width:5px;
border-color:red;
border-style: solid;
화면 전체를 쓰는 태그 : block (blcok level element)
display : block;
자기 자신의 부피(크기)를 갖는 것 : inline element
->block이 자기 자신만큼의 부피를 갖게 하는 법
display : inline;
display: none; 화면에서 사라지게 할 수 있다
중복제거 : 생성자 합치기
h1, a {
border: red 5px solid;
}
컨텐츠와 테두리 사이의 간격 : padding:20px; (안쪽)
테두리와 테두리 사이의 간격 없애기 : margin:0; (바깥쪽)
테두리와 테두리 사이의 간격 추가 : margin:20px;
width:100px; 박스 폭 설정
웹 페이지에서 우클릭 -> 검사 어떤 태그가 어떤 css의 영향을 받는지 확인가능 : 개발자도구
border-bottom:1px solid gray; 사이트를 나누는 줄 긋기
**디자인을 위해 어떤 의미도 없는 태그를 써야할 때가 있음
-> <div> 태그 사용
그리드
display:grid;
grid-template-columns: 150px 1fr; // fr : 나머지 공간을 다 쓴다, 화면 전체를 쓰며 크기가 자동조절 되는기능
그리드 사용하기
grid 값 밑에 있는 ol 지정 : #grid ol
미디어 쿼리
<div> Responsive </div>
화면의 크기에 따라 다르게 하기 = 미디어 쿼리 필요
화면이 800픽셀보다 크다 = 최소한 800픽셀이다
screen width > 800px
=
@media(min-width:800px) {
div {
display:none;
}
screen width < 800px
@media(max-width:800px)
화면 크기가 변경되면 문단이 이동하는 코드
@media(max-width:800px) {
#grid {
display: block;
}
Css 코드의 재사용 : 중복의 제거
link 태그 : 웹 페이지가 어떤 css파일과 연결되어있는지
link rel=“” href=“”
-> css파일을 만들 경우 별도로 꺼내서 중복을 제거하는 것이 좋다
cashing – 저장된 결과를 받아와서 사용한다
css 파일을 생성하여 중복되는 디자인 코드를 저장하고
<link rel="stylesheet" href="style.css">을 추가하면 긴 코드를 대체할 수 있다
**Can I use 사이트 = 프론트 언어중에 현재 사용되고 있는가를 안내함
초록은 ok 아니면 no