CSS(Cascading Style Sheets)는 마크업 언어로 작성된 문서의 프레젠테이션을 설명하는 데 사용되는 스타일 언어이다. 본 포스팅에서는 웹개발에서 이 정도는 알아야 된다고 필수 내용만 정리하였다.
HTML 문서의 <head> 섹션에 있는 <style> 태그를 사용하여 정의할 수 있습니다.
<head>
<style>
/* CSS rules go here */
</style>
</head>
HTML element의 스타일 속성을 사용하여 특정 HTML element에 CSS 스타일을 적용할 수 있다. 인라인 스타일이리고 한다.
<p style="color: blue;">This text will be blue.</p>
그리고, 링크태그로 외부 CSS 파일을 링크할 수 있다. 배포 CDN을 사용해서 외부자원을 링크할 수 있다.
<link href="styles.css" rel="stylesheet">
포지션
position 속성은 기본적으로 컨테이너 안을 기준으로 한다.
position: static => 기본값으로 왼쪽에서 오른쪽 위에서 아래쪽으로 쌓인다.
position:relative => 상대값으로 static위치 기준(왼쪽 객체, 위쪽객체에 영향받는)에서 top, right, left, bottom등으로 상대적 위치를 저정할 수 있다.
position:absolute => static이 아닌 부모를 찾아올라가서 그 시점부터 절대값이다. 경우에 따라 body의 0, 0이 기준이 될 수 있다.
position:fixed => 브라우저 기준의 고정값으로 하단 스크롤되도 그 자리에 고정된다.
display 속성
display: block => 블록을 위아래로 쌓는 스타일(세로형)
display: inline => 블록을 옆으로 쌓는 스타일로 고정된 폭을 넘어가면 다음 줄로 이어감.
display: inline-block => 블록을 옆으로 쌓다가 폭이 넘어가면 아래로 쌓임. 포토앨범이 상품정보등에 사용
첫번째 block박스는 우측에 여백이 있으나 수직으로 쌓인다.
두번째 inline박스 3개는 지정된 폭이랑 높이를 무시하고 inline처리되어 한 줄로 쌓였다.
세번째 inline-block박스는 container클래스의 폭이 380px으로 첫번째 상자가 2개만 나열되고 아래로 쌓였다. 이것은 마진이 10px씩 있으므로 3개가 되면 360정도이다. 실제로는 폭이 380px정도 되야 inline-block인 경우에 한층으로 쌓이게 된다.
네번째 inline-block박스는 container클래스의 폭이 400px으로 한층으로 옆으로 쭉 3개가 쌓이게 된다
float
화면폭이 바뀌더라도 다른 객체에 영향을 받지 않고 우측이나 좌측에 붙어있게 하고 싶을 경우 사용한다. 떠다니는 레이어로 자리를 차지하지 않는 태그로 그 다음에 오는 태그는 float속성을 가진 태그의 자리를 인지하지 못하고 채우려 한다.
float 속성을 가진 태그 좌우옆을 채우지 않고 줄바꿈처리를 할 경우 clear: both(right, left)으로 좌우옆에 float 영향을 제거한다.
마진과 패딩
CSS에서 마진 패딩은 웹 페이지의 요소 사이의 공간을 제어하는 데 사용된다.
margin은 외부 여백, padding은 내부 여백 정도로 이해하면 된다.
margin 속성은 요소 주위에 공간을 추가하는 데 사용될 수 있다. 예를 들어, <div> 요소의 모든 변 주위에 10px 여백을 추가하려면 다음 CSS를 사용할 수 있다.
div {
margin: 10px;
}
또한 margin-top margin-right margin-bottom margin-left 특성을 사용하여 요소의 각 측면에 대한 여백을 개별적으로 지정할 수 있다.
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
padding 속성은 요소 내부의 공간을 추가하는 데 사용될 수 있다. 예를 들어, <div> 요소의 모든 면 주위에 10px 패딩을 추가하려면 다음 CSS를 사용할 수 있다:
div {
padding: 10px;
}또한 padding-top, padding-right, padding-bottom, and padding-left properties을 사용하여 요소의 각 측면에 대한 패딩을 개별적으로 지정할 수 있다.
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
font 스타일과 !important
font-family, font-size, font-weight등이 있다.
font-family에서 첫번째 글꼴이 없는 경우 다른 글꼴을 풀백옵션으로 ,(콤마)를 이용해 사용할 수 있다.
font-weight는 bold 나 가중치 숫자(100, 200, 300, 400,, 900)로 지정할 수 있다.
font-size는 px(픽셀), em, rem단위로 사용할 수 있다. em는 상위요소에 영향을 받고 rem은 최상위 요소에 영향을 받는 상대적 사이즈이다. 모바일등을 고려하여 rem이 추천된다.
!important 속성은 font-style과 관련이 없으나 같이 내용에 포함시켰다. 용도는 스타일이 겹쳐서 원하는 스타일이 적용이 안될 때 !important 속성을 추가하여 최 우선적으로 적용시킬 수 있다. 템플릿으로 받은 스타일을 바꾸기보다 해당 페이지나 해당영역에만 다른 스타일을 적용할 때 기존 스타일을 무시하고 지정한 스타일을 우선적으로 적용시키기 위해 !important 속성을 쓴다.
border 스타일
테두리 속성은 element에 테두리를 추가하는 데 사용할 수 있다.
테두리 스타일은 기본 none, solid, dotted, dashed, doubled등이 있다.
div {
border: 1px solid black;
}모든 div태그 사방 테두리는 1픽셀의 블랙라인이 될 것 이다.
또한 색, 속성을 개별적으로 지정할 수 있다.
div {
border-color: red;
border-style: dotted;
border-width: 2px;
}
그러면 모든 <div> 태그 주위에 2픽셀 너비의 빨간색 점선 테두리가 추가된다.
z-index
레이어의 순서정도로 이해하면 된다. 또한 키보드 탭키로 이동할 때 이동 순서이기도 하다.
두개의 태그가 겹칠 때 z-index가 낮을 수록 위로 올라온다. 따라서 중요한 것의 z-index를 낮춰야 한다.
#element1 {
position: absolute;
z-index: 1;
}
#element2 {
position: absolute;
z-index: 2;
}
셀렉터
id는 #아이디로 클래스는 .(점)클래스로 접근하고 태그는 tag명으로 셀렉팅하면 된다.
그러나 페이지가 복잡할 수록 셀렉터를 찾기가 어렵다. 그 경우 크롬브라우저에서 원하는 객체를 선택하고 우측마우스에서 검사를 클릭하면 해당 객체가 선택되고, 다시 copy>copy selector 를 사용하여 selector를 복사할 수 있다. copy된 셀렉터를 적절히 수정하면 스타일에 사용할 수 있는 selector가 된다.
다음 포스팅을 참고한다.
https://itcamp24.tistory.com/204
웹페이지 디버깅
크롬브라우저에서 F12키를 누르면 아래와 같이 디버깅 창이 활성화 된다. 붉은색이 메뉴이며 이 메뉴에서 Element는 위 화면처럼 선택한 엘리먼트의 스타일이 어떻게 적용되었는지, 어떤 셀렉터(se...
itcamp24.tistory.com
CSS 동영상 강좌
https://www.youtube.com/watch?v=5iPK8G1ilUk&t=55s
'핵심정리' 카테고리의 다른 글
| 자바 핵심 요약 (0) | 2023.02.01 |
|---|---|
| Javascript 핵심 요약 정리 (1) | 2023.02.01 |
| HTML 핵심 요약 정리 (0) | 2023.02.01 |
| PYTHON 기초 정리 (0) | 2023.01.27 |
| React 기초 정리 (0) | 2023.01.26 |
댓글