-
반응형
HTML이 구조면 CSS는 구조의 외부와 내부를 꾸미는 역할
CSS(Cascading Style Sheets)
웹페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어. UI 및 레이아웃을 구성
프론트엔드 개발자와 CSS 관계
편안한 분위기, 정돈된 레이아웃, 문단 간격을 조정한 사이트가 보기좋고, 가독성도 증가.
CSS는 사용자가 HTML문서에 작성 된 컨텐츠를 잘 이해하도록 돕는 역할.
사용자 인터페이스(UI; user interface)
인터페이스는 컴퓨터와 교류하기 위한 연결고리.
직관적이고 쉬는 UI 제작은 프론트엔드 개발자의 기본 소양
웹 개발 기술을 기반으로 사용자와 소통할 수 있는 웹 페이지 제작을 담당.
좋은 사용자경험(UX; user experience)은 직관적이고 쉬는 UI에서 나온다.
아래 역량이 필요합니다.
- 컴포넌트 기능별로 묶어서 제작
- 화면의 구성이나 배치 (레이아웃 디자인)
- 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
그리고 아래의 내용은 프론트엔드 개발자에게 있으면 좋고, 없어도 크게 상관없는 부분입니다.
- 정렬이나 배색에 대한 감각
- UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험
body {
color : red;
font-size : 30px;
}
<link> 요소는 HTML 파일과 다른 파일을 연결하는 목적으로 사용합니다. <link> 요소의 rel 은 연결하고자 하는 파일의 역할이나 특징을 나타낸다.
CSS(Cascading Style Sheet)는 stylesheet이므로 rel 속성에 stylesheet 를 추가합니다.
href 속성에는 파일의 위치를 추가해야 합니다.
CSS 스타일을 적용할 수 있는 방법은 3가지가 있습니다. 그 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일, CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <style> 요소 내에 작성하는 내부 스타일 시트, 그리고 앞서 설명한 외부 스타일 시트입니다.
그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않습니다.
* id와 class의 차이점을 반드시 기억하세요.
id class #으로 선택 .으로 선택 한 문서에 단 하나의 요소에만 적용 동일한 값을 갖는 요소 많음 특정 요소에 이름을 붙이는 데 사용 스타일의 분류(classification)에 사용 글자색상 변경 : color
배경 색상 변경: background-color
테두리 색상 변경 : border-color
글꼴속성: font-family
요소를 구성하는 텍스트의 글꼴을 정의. 여러개의 글꼴을 연달아 기입하여 우선순위를 지정할 수 있다.
사용자에게 우선순위의 폰트가 지원되지 않을 경우 다음 폰트로 적용
ex)
*{
font-family : Times, monospace, serif;
}
글자크기변경 : font-size
수치와 단위를 지정해 글자의 크기를 정의
px ; 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
rem ; <html> 태그의 font-size에 대응하는 상대적인 크기
em ; 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기
ex) span{font-size : 16px }
굵기 : font-weight
밑줄, 가로줄 : text-decoration
자간 (가로 한 글자 사이 간격): letter-spacing
행간 (세로 한줄 한줄 사이 간격) : line-height
가로정렬 : text-align
블록 내에서 텍스트의 정렬방식을 정의. 미리 정의된 키워드 값을 정리한다.
left / right ; 왼쪽 또는 오른쪽 정렬한다.
center ; 가운데 정렬
justify(양쪽끝정렬(마지막줄제외))
ex)
p{
text-align : right;
}
텍스트의 색상변경
키워드 : 미리 정의된 색상별 키워드를 사용한다(ex, red blue)
RGB색상코드: #+ 여섯자리 16진수 값으로 지정.
RGB함수 : Red, Green , Blue의 수준을 각각 정의해 지정
ex)
span{ color: red;}
span{ color : #FF0000;}
span{ color : rgb(100%,0%, 0%};
단위-절대단위: px, pt 등
-상대단위: %, em, rem, ch, vw, vh 등
*글꼴 사이즈를 정할때
1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 : px(픽셀) 사용
픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리합니다. 모바일로 이용할 경우 더 안보이는 경우 발생
2. 일반적인 경우: 상대단위인 rem을 추천
*화면 사이즈를 정할 때
1.반응형 웹에서 기준점을 만들때 : px(픽셀)
반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트..
2. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 : vw(view width), vh(view height)
웹사이트의 보이는 영역을 Viewport. 1vw는 보이는 영역의 1/100, 1vh는 보이는 영역 높이의 1/100
화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트는 100vw, 100vh
<박스모델>
모든 컨텐츠는 고유한 영역이 있다.
각자의 영역을 가지며 일반적으로 하나의 컨텐츠로 묶이는 요소들이 하나의 박스가 된다.
박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가진다.
줄바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)
1. 줄바꿈이 되는 요소 ; <h1>,<p> = block박스(자기가 속한 영역의 너비를 모두 차지하여 블록을 형성)
줄바꿈이 되지 않는 요소 ; <span> = inline박스(자기에게 필요한 만큼의 공간만 차지한다.)
display 속성은 요소를 블록과 인라인 요소 중 어느쪽으로 처리할 지 정의
블록레벨 요소인 div요소를 인라인으로 처리하고싶다면
div{display : inline;}
inline ; 인라인으로 처리한다.
block ; 블록레벨로 처리한다.
inline-block ; 인라인으로 배치하되, 블록레벨 요소의 속성을 추가할 수 있도록 처리.
none ; 디스플레이(표시) 하지 않는다. 존재는하지만 보여주지않는다
2. CSS의 width,height 등의 박스의 크기를 성정하는 속성이 작동하지 않는 경우 ; span
block inline-block inline 줄바꿈 여부 줄바꿈이 일어남 줄바꿈이 일어나지 않음 줄바꿈이 일어나지 않음 기본적으로 갖는 너비(width) 100% 글자가 차지하는 만큼 글자가 차지하는 만큼 width, height 사용 가능 여부 가능 가능 불가능 * 박스를 구성하는 요소
Border(테두리)를 기준으로 padding(안쪽여백)과 margin(바깥여백)이 있다.
1. border(테두리)
심미적인용도, 영역이 차지하는 크기 파악, 레이아웃 시 시각적으로 확인 가능
P{
border: 1px solid red;
}
테두리두께 ; border-width
테두리스타일 ; border-style : none(기본값), solid(직선), dotted(점선), dashed(긴점선) 등
테두리 색상 ; border-color : 칼라정의 방식과 동일
Span { border : 2px solid green;}
질문
- 테두리를 점선으로 만들고 싶으면 어떻게 해야 할까요? border-style의 값 중 하나를 바꿔보세요.
- 테두리를 둥근 모서리로 만들 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, border 속성만으로는 둥근 모서리를 만들 수 없습니다.
- 박스 바깥쪽에 그림자를 넣을 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, 그림자를 명확하게 보기 위해서는 background 속성이 불투명해야 합니다.
2. margin(바깥여백)
@Top, right, bottom, left로 시계방향
p{
margin: 10px 20px 30px 40px;
}
@값을 두개만 넣으면
top, bottom :10px
left, right:20px
p{
margin: 10px 20px;
}
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
*padding에도 동일하게 적용
*바깥여백(margin)에는 음수 값을 지정 할 수 있다. 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어든다.
p{
margin-top: -2rem;
}
3.padding(안쪽 여백)
padding은 border을 기준으로 박스 내부의 여백을 지정.
값의 순서에 따른 방향은 margin과 동일하게 top-right-bottom-left
p{
padding: 10px 20px 30px 40px;
}
배경색이나 border을 적용하면 안쪽 여백을 더욱 선명하게 확인가능
p{
padding: 10px 20px 30px 40px;
border: 1px solid red;
background-color : lightyello;
}
4. 박스를 벗어나는 컨텐츠처리
박스크기보다 컨텐츠 크기가 더 큰 경우 컨텐츠가 박스 바깥으로 빠져나온다.
p{
height: 40px;
overflow: auto; //박스보다 큰 컨텐츠에는 스크롤을 표시
}
넘치는 컨텐츠의 내용을 보여주고 싶지 않을때 ; overflow: hidden;
x축과 y축을 지정해 가로, 세로방향으로 스크롤 지정 ; overflow-x /. overflow-y
<CSS selector>
전체셀렉터 *{ } 문서 내 모든요소를 선택한다
태그 셀렉터 Tag{ } 주어진 이름을 가진 요소를 선택한다/ 주어진 이름을 가진 요소가 다수일 경우, 해당요소들을 모두 선택
h1{ }
div{ }
section, h1 { }. ,를 이용해 선택자를 그룹화한다.
ID셀렉터 #id { } 주어진 id 속성값을 가진 요소를 선택 id는 고유한 식별자 역할을 하는 전역속성이다.
class셀렉터 .class{ } 주어진class속성값을 가진 요소를 선택
선택자가 겹치는 경우
기본적으로 나중에 작성 된 스타일이 적용된다.
선택자가 다르지만 요소가 겹치는경우 선택자 우선순위에 의해 적용될 스타일이 결정
아이디선택자>클래스선택자>태그선택자
오늘의회고
월요일이라 그런지 매우 피곤했다. 졸려서 집중도 안되지만 자바스크립트 할때 보다는 괜찮았다.. 쉽다는건 아니다..
이해도 자가 점검 리스트
Chapter1. CSS 기초
- CSS의 사용 목적을 이해한다. ✅
- CSS의 기본 문법과 구조를 이해한다.✅
- CSS를 HTML에 적용하는 방법에 대해서 이해한다.✅
- HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.✅
- CSS를 이용해 텍스트를 꾸밀 수 있다.🔺
- CSS에서 쓰이는 단위를 기억하고, 각 단위가 적합한 경우를 구분할 수 있다.🔺
- MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.✅
Chapter2. 박스모델
- CSS 박스 모델을 이해할 수 있다.🔺
- 박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다.✅
- margin, boder, padding, content
- 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.🔺
Chapter3. CSS selector
- 다양한 CSS selector 규칙을 이해한다.🔺
- 후손 selector와 자식 selector의 차이를 이해한다.✅
- 필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다.✅
반응형'공부' 카테고리의 다른 글
React Redux (0) 2022.07.06 Unit4 - [HTML] 기초 (0) 2022.07.04 [JavaScript] 기초 제어문2 (0) 2022.07.01 [JavaScript] 기초 (0) 2022.06.30 22.04.25 Learn how to learn (0) 2022.06.29