테킷스쿨에는 멋쟁이사자처럼 [대학11기]프론트엔드 온보딩 트랙 강의가 있습니다.
멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.
이번에 리뷰하려는 것은 조경민 강사의 ✨챕터 8 : CSS Beginner✨ 입니다.
① CSS 적용
css파일을 html파일에 연결하는 과정이 필요하다.
헤드 태그 안에 link 태그로 작성해주는 과정이다.
<link rel="stylesheet" href="css 파일의 위치">
파일의 위치
./ ➡ 같은 해당 파일과 같은 위치에 있을 때를 의미한다.
../ ➡ 해당 파일의 상위에 있음을 의미한다.
② CSS 구성 (1)
box-sizing :
박스에 적용된 사이즈의 기준 정하기이다.
브라우저에서 자동으로 설정해 띄워준다.
content-box :
요소 사이즈에 패딩과 테두리를 포함하지 않는다.
처음 계획했던 값보다 박스 값이 커지는 현상이 발생한다.
실제로 보여지는 길이에는 패딩이 포함되기 때문이다.
border-box :
요소 사이즈에 패딩과 테두리의 길이와 높이를 포함한다.
사용자가 설정한 값이 박스와 패딩값을 포함한 값으로 인식한다.
패딩사이즈로 인해 외곡되는 현상을 방지할 수 있다.
③ CSS 구성 (2)
규칙 rule :
선택자부터 속성, 값 까지 모두 합친 하나의 블록을 의미한다.
선택자 selector :
어떤 html 요소에 스타일을 적용할 지 선택한다.
부여하는 속성의 주체값-태그-를 의미한다.
속성 property :
스타일을 부여할 항목을 의미한다.
값 :
속성에 해당되는 특성의 값을 의미한다. px일 수도, color일수도 있다.
선언 declaration :
속성과 값을 합한 부분이다.
❔ 어떤 요소에 스타일링을 적용할까?
아래는 예시를 위해 작성된 html 코드이다.
<h1>모두를 위한 코딩 강의 - 테킷</h1>
<div>
<p class="student">피눈물나는 코딩</p>
<h2 class="student">멋쟁이사자처름 스쿨</h2>
<h2 class="original">오리지널 클래스</h2>j
</div>이를 바탕으로 css 파일의 코드를 작성할 수 있다.
* universal :
모든 요소 전체를 의미한다.
가급적 사용하지 않는다.
여러 종류의 태그에 적용
h2, p {
...
}이와 같이 선택자 부분에 여러 태그를 작성할 수 있다.
특정 클래스에 해당되는 요소에 적용
.student {
...
}특정 태그하위의 class 에 해당 css를 적용한다.
태그가 달라도 괜찮다.
h2.student {
...
}특정 태그 하위에 여러 class 중 특정 class에 대해서만 css를 적용할 수 있다.
특정 아이디에 해당되는 요소에 적용
#original {
...
}특정 아이디일 경우에는 #를 이용해서 활용한다.
#
id 를 나타낼 때 사용한다
.
class 를 나타낼 때 사용한다
부모 요소 내 특정 자식요소
div p {
...
}div 라는 태그 내 자식요소인 p 태그를 의미할 때는 스페이스를 이용한다.
주석
/ ... /
④ CSS 특성
동일 태그 규칙이 중복 작성 ➡ 마지막에 작성된 규칙 적용
부모 태그 규칙 적용 ➡ 자식 요소에 동일 규칙 적용
부모 태그 규칙과 자식 요소에 다른 규칙 적용 ➡ 자식 요소의 규칙으로 적용
html 파일 자체에 스타일요소에 규칙을 줄 수 있다.
하지만 추후 유지보수 과정에서 힘들어지기때문에, css 파일에서 변화를 주는 것을 추천한다.
⑤ Box Model
디스플레이 속성으로 inline, block, inline-block 등이 있다.
inline
자기 자신의 영역 만큼만 콘텐츠에 변화를 준다.
한 줄에 이어서 표시된다.
좌우의 마진이나 패딩값은 설정 가능하나, 상하의 경우에는 변화가 불가능하다.
<a> <img> <span>
block
자기 자긴의 부모만큼의 넓이를 가진다.
개별요소마다 줄을 바꾼다.
width와 height로 요소의 크기를 조절할 수 있다.
내용과 별개로 자신의 영역을 가진다.
block 가지지만, inline 가지지 못하는 것
- width, height (상하 padding은 레이아웃에 적용x
- margin, padding (inline은 좌우만 적용)
inline-block
inline과 block의 절충안이다.
두 가지의 특징을 모두 가진다.
줄을 바꾸지 않는다
width, height를 가지고 margin과 padding 또한 가진다.
box-model
margin
상하좌우 각각 스페이스값으로 분리해 다른 값을 적용할 수도 있고, 전체에 동일한 값으로 견화를 줄 수 있다.
margin: 상 우 하 좌 ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;위 와 같은 순서로, 윗쪽부터 시계방향으로 이동해 값을 설정할 수 있다.
border
하나의 속성에 두께, 유형, 색상을 적용할 수 있다.
border: 두께 유형 색상;
border-width: ;
border-type: ;
border-color: ;padding
하나의 속성에 위쪽부터 시계방향으로 이동해 값을 부여한다.
padding: 상 우 하 좌 ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;⑥ Box sizing
박스에 적용된 사이즈의 기준을 정하는 방법
② CSS 구성 (1) 과 동일한 내용이다
⑦ CSS 단위
px
스크린을 구성하는 작은 점인 pixcel을 기준이다.
%
부모요소를 기준으로 크기를 결정한다.
em/rem
폰트 크기에 비례해서 크기를 결정한다.
상위요소에 em 혹은 rem 값을 곱해서 결정한다.
em
부모요소의 폰트 크기를 기준으로
rem
루트 요소-html의 폰트 크기를 기준으로
vw/vh
내가 보고있는 브라우저 영역을 가득채워 만든다.
스크롤로 하단의 컨텐츠로 이동한다.
vw
각 디바이스별 화면의 너비/높이를 기준으로 %를 차지하도록
⑧ 이미지 다루기
코드에 이미지를 담는 코드는 아래와 같다.
<div>
<img
src="이미지 경로"
alf="이미가 정상적으로 보이지 않을 경우 보일 문구"
>
</div>이미지의 크기 등을 css 파일에서 조정할 수 있다.
- 이미지가 화면 크기에서 벗어나지 않도록 하고싶다면 :
img {
max-width: 100%;
}- 이미지를 부모요소 영역의 가운대로 확대/축소 하고싶다면 :
img {
objec-fit: cover;
}- 이미지의 비율을 지키면서 부모요소 영역의 가운대로 확대/축소 하고싶다면 :
img {
objec-fit: contain;
}- 이미지의 비율을 유지하지 않고 부모요소 크기에 맞춰 변경해 채우고 싶다면 :
img {
objec-fit: fill;
}
⑨ Overflow
-
scroll을 속성값으로 주어 웹 페이지에 가로/세로로 스크롤을 제공할 수 있다.
scroll-x로 가로부분만 보이도록, scroll-y로 세로 부분만 보이도록 만들 수 있다. -
auto 로 브라우저가 자체 스크린 크기에 맞춰서 알아서 스크롤을 보이도록 만들 수 있다.
⑩ 폰트 꾸미기
color: ;
16진수의 숫자로 조합해 #000000 등으로 내타낸다
font-size: 10px;
px 단위로 나타낼 수 있다.
font-style: ;
italic 으로 기울임을 나타낼 수 있다.
font-weight: ;
100~900 으로 100 단위로 thin 부터 black 으로 폰트의 두께를 바꿀 수 있다.
text-decoration: ;
밑줄을 제거하고 싶다면 none 값을 부여하면 된다.
a:link { color: ;}
클릭한 적 없는 링크를 표현할 수 있다.
a:visited { color: black; }
클릭해 방문한 적있는 링크를 표현할 수 있다.
⑪ 테두리 꾸미기
border 속성에 두께, 스타일, 색상 값을 부여해 테두리를 꾸밀 수 있다.
border-radius
특정 각도로 둥글게 깎을 수 있다.
⑫ 배경 이미지 설정
background-color
배경 색상을 블록 전체에 부여한다.
background-image: url(이미지 경로);
기본값은 바둑판식 채우기이다.
background-repeat: no-repeat;
단일 이미지를 꽉 채우고 싶다면
background-size
: contain;
이미지가 온전히 표시되는 것이 우선된다면
: cover;
요소의 배경을 모두 덮고 싶다면
background-position: center;
이미지를 가운데 배치시키고 싶다면
❕ 이미지를 레이아웃에 맞는 해상도로 크롭해서 사용하는 것이 제일 좋다
⑬ 요소 정렬하기
요소를 위로 맞추되 가운데 정렬
margin: 0 auto;
부모 block요소의 width를 기준으로 자동 margin 계산 (단, 부모가 width 요소값이 존재해야 한다.)
이미지 및 텍스트의 인라인 요소를 블록 요소 내 가운데 정렬
text-align: center;
부모 요소가 block이고 자식 요소가 inline이다.
더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396
