#CSS
html 파일에서 css 파일 불러오기 :
<link rel="stylesheet" href="./css/common.css">
//common.css 파일을 불러옴
<style>display :
- inline : 블록 속성이 무효화되고 내부 요소 텍스트만큼만 크기를 차지하게 된다.
- block : 페이지 너비 전체를 혼자 사용함. span같은 인라인 tag 에 사용해도 block 형태로 만든다.
- inline-block : 블록은 유지 되지만 인라인 형태로 보여짐.즉 , inline 의 성질을 가지면서 동시에 사용자가 원하는 대로 모형을 꾸밀 수 있다.
width :auto; (auto는 브라우저의 넓이만큼 같이 넓어지려고 함. ,전체 너비 사용)
height : auto; (최소한의 높이 사용 = 최소한의 높이만큼 넓어지려고 함)
min-width : 최소 너비
max-width : 최대 너비
min-height : 최소 높이
max-height: 최대 높이
width:auto; : 알아서 적당히 조절. 블록 요소의 초기값으로 자동 설정됨.
max-width:500px; = 브라우저 크기만큼 넓어지는데 최대 너비는 500px만큼 지정
height에서 height : auto 로 해놓으면 최소한의 높이만큼 넓어지기 때문에 max-height 를 지정해도 별로 의미가 없다.
크기 단위
px : 고정크기
% : 가변크기 , 상위태그를 기준으로 %만큼 크기 지정
vw,vh : 가변크기 , Viewport를 기준으로 백분율만큼 크기 지정
Viewport란? 현재 보이는 웹페이지. 창이 커지던 작아지던 그게 항상 viewport
rem : 상대적 크기 , 기본글자크기를 기준으로 백분율만큼 크기 지정
em : 상대적 크기 , 부모글자크기 기준으로 백분율만큼 크기 지정
Color(색상 지정)
<style>
h1{color:violet} //기본 색상지정
h2{color: rgb(255,233,1)} //rgb값으로 지정
h3{color:rgba(255,0,0.5)} // rgb의 투명도를 지정 가능
r,g,b,투명도값(0-1.0) 까지 지정가능
h4{color:#3D00EB} //rgb값의 16진수 값
</style>
오후
font-size
font-size 도 크기 단위를 사용한다.
px : 고정 크기 지정
em : 부모 태그 폰트사이즈 지정 되어있고
부모 요소를 기준으로 크기 측정. 부모 font size 가 16이라면 2em 은 32.
rem : 기본글자크기(root)(16px) 을 기준으로 크기 측정. 기본크기가 16이라면 2rem은 32
% : 상위태그를 기준으로 측정. 상위태그가 32px이라면 50%는 16px
a태그는 부모 속성 영향을 안받음
(그래서 따로 지정해줘야됨)
font-weight : 글자 굵기
text-decoration : 글자 밑줄 , 없애기 등
font-family : 글꼴 지정.
사용하는 글꼴, 글꼴 사용할 수 없을때 대체 글꼴 범주명
/* 글꼴 가족 이름과 범주명 */font-family: Nanum Gothic Coding, sans-serif;
margin :
속성 4개 사용. 시계 방향 순서로 값을 준다 . (위 - 오른쪽 - 아래 - 왼쪽)
ex) margin : 10px 5px 10px 5px;
2개 속성만 사용할 경우 : 위아래 , 좌우 여백을 의미한다.
padding :
padding 의 경우 1개 속성만 사용할 경우 , 안쪽 여백이 변경 된다.
border : 태그의 테두리 설정
특정 방향만 따로 설정 가능. (ex. border-top : 5px solid blue;)
Overflow : 요소 내 컨텐츠 겹칠 때 표시 방법 지정
- visible : 기본 값. 컨텐츠가 넘칠 때 상자 밖으로 삐져나온다.
- hidden : 넘치는 부분은 잘려서 안보이게 된다.
- scroll : 스크롤바가 추가되어 스크롤을 할 수 있게 된다. (가로,세로 둘다 가능)
- auto : 컨텐츠 크기에 따라 자동으로 스크롤바 추가됨.
box-sizing : 요소의 전체 너비와 높이를 어떻게 계산하는지 설정
box-sizing : border-box ; = 테두리를 기준으로 크기를 정한다.
CSS 선택자 ***
선택자의 종류
<!-- 전체 선택자 -->
<style>
/* /* 전체 선택자 */
*{ // *가 전체를 선택한다는 뜻으로 사용
box-sizing: border-box;
margin:10px;
}
/* 요소 선택자*/
div{ //div 라는 요소를 선택함
width:150px;height:150px;border:1px solid;
}
/* /*id 선택자 */
#id-1{ // # 가 id를 선택하는 선택자로 사용됨
background-color: beige;
}
.group
/* class 선택자 */
/* 그룹 선택자 */
#id-1,.group{ //여러개의 요소를 하나로 묶어서 선택함.
border: 4px double red;
}
</style>
자식 선택자
/* 자식 선택자 */
.par>div{ // par class 안의 직계자식 div 태그
background-color: orange;
}
.par>p{ //par class 안의 직계자식 p 태그
font-size: 2rem; //근데 다 div안에 있는 p 태그라서 자손으로 취급되어서 선택이 안됨
}
.par>.son>div{ //par class 안에 있는 son class의 직계자식 div 태그
background-color: white;
}
특정 요소의 직계 자식만 선택함 !
자손 선택자
/* 자손 선택자 */
.par p{
background-color: aqua;
} //par class 의 모든 p 태그 선택
.par div{
border:2px dotted green;
} //par class 의 모든 div 태그 선택
자식 , 손자 , 후손을 모두 포함한다.
동위 선택자
/* ~ : 동위선택자 , 같은 Depth의 하위 모든 선택자 */
/* + : 동위선택자 , 같은 Depth의 하위 1개 선택자 */
.c1>p{color:blueviolet;}
.c2~p{color:red;}
.c2+p{font-size:2rem;}
.c2 p{font-size :.5rem;}
</style>
</head>
<body>
<div class="c1">
<p>1 Hello world</p>
<div class="c2">
<p>2 Hello world</p>
<div class="c3">
<p>3 hello world</p>
<p>4 hello world</p>
<p>5 hello world</p>
</div>
<p>6 hello world</p>
<p>7 hello world</p>
</div>
<p>8 hello world</p>
<p>9 hello world</p>
</div>
.c1>p{color:blueviolet;} :
c1 class 의 자식요소 p : 1 hello world
.c2~p{color:red;} :
c2 class 의 ~ 동위선택자 (같은 depth 하위 모든 선택자) : 8,9 hello world
(c2와 같은 depth 의 태그 8,9 hellwor p 태그)
.c2+p{font-size:2rem;} :
c2 class의 + 동위선택자(같은 depth 하위 1개 선택자) : 8 hello world
(1개만 선택하므로 8 hello 지정)
.c2 p{font-size :.5rem;} :
c2 클래스의 자손 선택자 p: 2,3,4,5,6,7 hello world
공부를 하는것도 물론 중요하지만 개발자에게 더 중요한것은 공부한것을 토대로 직접 무언가를 만들어보는 경험이라고 선생님이 얘기하셨다.
근데 맞는말인게 백날 공부해봐야 실사용을 안해보면 어차피 다 잊어버리는거나 마찬가지기 때문에 직접 무언가를 만들기 위해 사용을 해봐야 코드가 어떤 구조로 이루어져있는지, 어디에 사용해야 하는지 이런걸 알 수가 있다.
그러니 너무 완벽하게 알고 넘어가려 하지말고 배운게 있다면 이것저것 사용해보고 오류도 나보고 그런 시행착오를 겪는걸 더 중요하게 생각하며 공부하자.
중요한건 문제해결능력 !
'Developer Note > 국비과정 수업내용 정리&저장' 카테고리의 다른 글
| 24년 08월 23일 (0) | 2024.08.24 |
|---|---|
| 24년 08월 22일 (0) | 2024.08.24 |
| 24년 08월 20일 (0) | 2024.08.21 |
| 24 년 08월 19일 (1) | 2024.08.20 |
| 24년 8월 16일 (0) | 2024.08.19 |