시작하는 말🙋♀️
어제는 html 기본을, 오늘은 css 기본을 배웠다.
물론 모든 것을 알게 된 것은 아니지만, 이고잉님이 뼈대를 잡아주셨으니 살은 내가 붙여야겠지.
오늘도 배운 내용을 정리하려고 한다.
언제나 정리하는 습관을 들여야지. 오늘도 내일도 화이팅.
CSS
1.CSS 의 역할
-
디자인에 최적화된 언어
-
중복의 제거(편리한 유지보수, 가독성 증가)
-
HTML이 정보 전달에 집중할 수 있도록 함
2.CSS 문법
-
selector(선택자): 효과를 누구에게 줄 것인가를 선택
-
delaration(선언, 효과): 선택자에 지정될 효과.
style 속성을 직접 사용한 경우에는 사용할 필요없음 -
property(속성)
-
value(값)
-
세미콜론(;): 구분자. 각 줄 구분
예시
a{
color:blue;
}selector: a
declaration: color:blue;
property: color
value: blue
태그
-
블록 레벨 엘리먼트(block level element):
화면 전체를 쓰는 태그 -
인라인 엘리먼트(inline element):
자기 자신의 콘텐츠 크기만큼 쓰는 태그
사용한 태그
1. HTML 문법과 CSS 문법 혼용
<style>
a{
color:blue;
}
.saw{
color:gray;
}
</style>2. 속성을 이용한 CSS
여기서 saw와 class(그루핑)는 html 문법
<li><a href="2.html" style="color">
<li><a href="1.html" class="saw">A</a><li>
<li><a href="2.html" class="saw">B</a><li>
3. 폰트
h1{
font-size: 40px;
font-align: center;
color:black;
}4. 박스 모델
- 중복 내용
<style>
h1{
border-width: 5px;
border-color: blue;
border-style: solid;
}
a{
border-width: 5px;
border-color: blue;
border-style: solid;
}
</style><style>
h1, a{
border: 5px blue solid;
}
</style>- 여백, 테두리 조절
<style>
h1{
border: 5px blue solid;
padding: 20px;
margin:10;
display:block;
width: 100px;
}
</style>- grid
grid-template-columns 뒤 부피 지정
<style>
#grid{
border: 5px solid blue;
display: grid;
grid-template-columns: 150px 1fr;
}
div{
border: 5px solid gray;
}
</style>
<div id="grid">
<div>ABC</div>
<div>DEF</div>
</div>5. 반응형 웹 (Responsive web)
화면의 크기에 다라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것
- 미디어 쿼리(mediaquery)
<style>
div{
border: 15px solid blue;
font-siz: 50px;
}
</style>
<div>
Responsive
</div>
-
개발자 도구를 통해 화면 크기 확인
-
화면 너비 기준에 맞춰 display:none; 설정
<style>
@media(min-width: 600px) {
div{
display: none;
}
}
</style>- 필요에 따라 min, max 설정
- 태두리도 삭제하고 싶다면 코드 추가
<style>
@media (max-width: 800px) {
h1{
border-bottom: none;
}
</style>6.css파일 생성
- 작성한 코드가 모든 파일에서 중복하여 등장할 때 활용
<head>
<link rel=""stylesheet" href="style.css"/>
</head>- 개발자 도구의 network탭 확인:
내부적으로 어떤 파일을 웹서버에서 다운로드하고있는지 확인
유용한 팁
1. 두 기호 사이의 콘텐츠를 무시하는 코드
<!--
코드 무시하기
-->2. 우선순위
-
태그에 가까이 있는 명령이 더 큰 영향력을 가짐
-
ID 선택자: 우선순위 부여
<style>
#active{
color:blue;
}
</style>
<li><a href="2.html" class="saw" id="active">A</a><li>
- ID 선택자, class 선택자, 태그 선택자 순서
- 같은 형태라면 마지막에 등장하는 선택자가 우선
- ID 값은 중복 불가
3. 여백 및 테두리 구분
- 바깥부터 margin, border, padding, content 순서
- 'css box model'로 검색하면 더 자세한 사진 확인 가능
4. 개발자도구 -검사
- "style": 해당 태그가 어떤 css 스타일의 영향을 받고 있는지를 보여주는 기능
5. grid
- 디자인을 위한 무의미 태그
<div>division, 블록 레벨 엘리먼트</div>
<span>인라인 엘리먼트</span>
목적에 따라 각 태그 사용
6. Can I Use (https://caniuse.com)
CSS, HTML, JavaScript 기술 가운데 현재 웹 브라우저들이 얼마나 그 기술을 지원하는지에 대한 통계 서비스 제공
다듬어지는 웹페이지🛕
나의 첫 웹페이지가 점진적으로 형태를 갖추고 있다.
생활코딩 강의를 보면서 따라 만든 웹페이지이지만 처음으로 만들고 다듬는 것이 큰 의미가 있는 것 같다.
내일 아침에 좀 더 바꿔봐야겠다!
낯설어서 약간의 어려움도 있지만,, 하면서 너무 즐겁고 두근거린다.
부족한 만큼 더 열심히 해야지.
내일도 화이팅!
