생각기록
생활 코딩 WEB2 CSS 본문
디자인에 최적화 된 새로운 언어를 추가 하는 것과
html 안에 이미 디자인과 관련된 새로운 태그를 추가하는 것 중 무엇이 더 쉬울까요?
html에 태그를 추가하는것이 쉽지만, 한계를 느껴 근본적으로 바꿀 수 있는
디자인에 최적화 된 새로운 언어가 CSS입니다.
CSS
1. <style> 태그 안에 있는 얘들을 읽는다.
2. 그 외에는 body 태그의 해당 태그에 style=" " 속성을 준다.
(해당 속성 값으로 css 문법에 따라 읽어 준다.)
항상 ; 을 해줄 것 (하나의 효과마다)
text-decoration : none ; 밑줄 같은 애들이 사라진다.
text-decoration:underLine ; 밑줄 생긴다.
기본 문법
selector(선택자) > a
Declasration(선언,효과) > { }
Property(속성)과 Value(값) > color red
a { color : red ; }
보통 속성값들은 검색하면, 1분만에 알 수 있다.
모든 것을 외울필요 없다!
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
생활 코딩 선생님이 추천해준 사이트
현재 웹브라우저들이 현재 그 기술을 채택하고 있는가 나온다.
폰트 사이즈 속성
css text size property 검색 하면,
여러 형태의 값이 보임
font-size : 250 %;
font-size : 200px;
font-size : large ;
등등
글자 정렬
css text center property
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
선택자
css selector 검색
class=" "
id=" "
박스 모델
h1 h태그는 제목태그라 전체부분을 써서 줄바꿈이 된다.
a 태그는 링크태그라 줄 바꿈하면, 불편하다. 줄바꿈이 안 된다.
이것을 편히 아려면, border 를 지정해서 보면 편하다.
border-width: 5px;
border: solid;
display
화면전체를 쓰는 태그들을 블록(Block level element)
자신의 크기만큼 같은 태그 inline(inline element)
컨텐트와 여백을 주기위한 것
안 padding (우리가 패딩을 껴입는 것을 생각)
밖 margin 테두리와 테두리 사이 간격
검사 도구로 패딩, 마진 여부를 확인 가능하다
기본적으로 dispaly block element인 얘들이 있다.
그럴 때 width값을 주면, 변경 가능
grid
display : gird
grid-template-columns: 2fr 1fr;
그리드를 사용해서 정렬해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
h1 {
border-bottom: 1px solid gray;
text-align: center;
font-size: 50px;
margin: 0;
padding: 20px;
}
ol {
border-right: 1px solid gray;
width: 100px;
margin: 0px;
padding: 20px;
padding-left: 35px;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
#article {
padding: 0px 20px 20px 30px;
}
</style>
</head>
<body>
<h1>WEB</h1>
<div id="grid">
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<div id="article">
<h3>HTML</h3>
<P>Html is Hypertext Markup Language
Html is Hypertext Markup Language
Html is Hypertext Markup Language
Html is Hypertext Markup Language
Html is Hypertext Markup Language
</P>
</div>
</div>
</body>
</html>미디어쿼리
반응형
화면의 크기 기준으로 보이고 안보이고를 정해보자
검사도구 켜서 화면이 800px 기준으로 크다면, 작다면을 나누자
@media (min-width: 1000px) { }
최소 가로길이가 1000px이상인 경우
@media (max-width: 1000px) { }
최소 가로길이가 1000px 이하인 경우
screen width > 800px
스크린의 width가 800px = 화면의 크기가 최소한 800px이다
@media(min-width:800px){
div{
display:none;
}
}801에서 사라진다..!!!
응용
화면에서 전체 레이아웃이 500px 이상이면, 별로인것같다.
500px 기준으로 클 때, 작을 때를 나눠 보자
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
@media (max-width: 500px){
#grid {
display: block;
}
}이렇게 되면, 디스플레이 속성이 grid 였던 얘가
화면이 500px 이하일 때 디스플레이 속성을 block으로 바뀌어서
줄바꿈이 된다.
@media (max-width: 500px){
#grid {
display: block;
}
ol{
border-right: none;
}
h1{
border-bottom: none;
}
}
500px 이하 일 때를 기준으로
첫 번째 사진이 두 번째 사진으로 바뀌게 된다
스타일 파일을 효과적으로 쓰기
스타일 태그 복사만 하면, 동작이 안될 것!
우리가 작성한 코드가 모든 웹페이지에서 중복해서 등장하기 때문이다.
중복의 제거가 필요하다
1. css 코드만 복사 해서 별도로 css파일을 만든다.
2. 기존 css 코드 지우고, <link> 태그로 이어 준다.
<link rel = "stylesheet" href=" .css">
모든 웹페이지에 연결 되고, css 파일에서만 관리하면 되서 매우 중요한 일이다.
코드양도 줄어서
인터넷비용도 절감가능하다
'강의 정리 > 생활 코딩 강의 정리' 카테고리의 다른 글
| 생활 코딩 WEB2 - 라이브러리와 프레임워크, 제이쿼리 쓰는 법 (0) | 2022.11.12 |
|---|---|
| 생활 코딩 WEB2 파일 쪼개서 정리 정돈 (0) | 2022.11.12 |
| 생활 코딩 WEB2 JavaScript 5 (0) | 2022.11.11 |
| 생활 코딩 WEB2 JavaScript 4 (0) | 2022.11.11 |
| 생활 코딩 WEB2 JavaScript 3 (0) | 2022.11.09 |
