CSS와 셀렉터
→ 셀렉터(모든 해당하는 태그선택) : ex) h1 { } / div { }
→ 모든 태그 선택 : * { }
→ 여러조건을 모두 만족하는 태그를 선택(선택 조건들을 공백없이 붙여씀)
ex) #label.center {…} (id가 label이면서 동시에 class가 center인 엘리먼트를 선택)
/ .show#only {…}(class가 show이면서 동시에 id가 only인 엘리먼트를 선택)
→ class 셀렉터(해당 클래스명을 가진 태그 선택) : ex) .widget { } / .center { }
→ attribute 셀렉터 (해당 태그중 해당하는 속성 및 속성값을 가진 태그만 선택)
ex) a[href] { } / p[id="only"] { } / p[class~="out"] { }
p[class|="out"] { } / section[id^="sect"] { }
div[class$="2"] { } / div[class*="w"] { }
→ 다중 선택(쉼표를 기준으로 해당하는 태그를 둘 다 모두 선택) : ex) section, h1 {…}
→ 후손 셀렉터( 해당 태그의 자식 태그의 바로 하위 태그를 선택, 자식의 자식 태그 선택)
header h1 {}
→ 자식 셀렉터 (해당 태그의 바로 하위 태그를 선택)
header > p { }
→ 인접 형제 셀렉터 (해당 태그의 하위에 있는 형제태그중 가장 인접한 태그를 선택)
section + p { } *인접(같은 부모태그 내부)
→ 형제 셀렉터 (해당 태그의 형제태그중 인접(같은 부모태그 내부)한 태그를 모두 선택)
section ~ p { }
→ 가상 클래스 ( 태그에 특정 이벤트가 발생하거나 해당 위치의 태그를 선택하여 스타일 변화)
/ 요소의 특정 상태에 따라 스타일을 정의
a:link { } / a:visited { } / a:hover { } / a:active { }
/ a:focus { }
1):link - 방문한 적이 없는 링크 2):visited - 방문한 적이 있는 링크
3):hover - 마우스를 롤오버(마우스가 위로 올라올때) 했을 때
4):active - 마우스를 클릭했을 때 5):focus - 포커스(마우스로 클릭) 되었을 때 (input 태그 등) 6):first - 첫번째 요소 7):last - 마지막 요소 8):first-child - 첫번째 자식
9):last-child - 마지막 자식 10):nth-child(2n+1) - 이 태그는 위에서 부터 아래로 찾음, 홀수 번째 자식(여기서 2n+1의 수식을 변경함에 따라 선택되는 순번의 자식을 변경할 수 있음, 예를 들어 2n으로 설정시 짝수 번째 자식만 선택), ‘( )’내부에 숫자를 넣을 경우 해당하는 번째 자식을 선택(ex) nth-child(3) : 3번째 자식을 선택)
11):nth-last-child(2)- 이 태그는 아래에서 부터 위로 찾음, 2번째 자식(여기서 ‘( )’내부에 수식을 변경하거나 다른 숫자를 넣어 선택되는 순번의 자식을 변경할 수 있음)
→ 요소 상태 셀렉터 (요소의 상태에 따라 +된 요소의 스타일을 정의)
input:checked + span { } : input태그가 선택된 경우 span태그의 스타일 정의
input:enabled + span { }: input태그가 선택 안된 경우 span태그의 스타일 정의
input:disabled + span { }: input태그가 선택이 불가능한 경우 span태그의 스타일 정의
→ 구조 가상 클래스 셀렉터 (암기할 필요는 없습니다)
p:first-child { }
/ 이 태그들은 여러개의 조건이 겹친 경우(해당 태그의 조건에 일치한 자식태그 선택)
ex) ul > li:last-child { } : 자식이면서 가장 마지막 형제 태그선택
ul > li:nth-child(2n) { } / section > p:nth-child(2n+1) { }
ul > li:first-child { } / li:last-child { }
div > div:nth-child(4) { } / div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
/ 이 태그들은 선택된 태그의 조건에 일치한 형제태그를 선택
p:first-of-type { } : p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택합니다. (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택합니다)
div:last-of-type { } / ul:nth-of-type(2) { }
/ p:nth-last-of-type(1) { } : 아래에서 부터 위로 찾음, 이 경우 가장 마지막에 있는 형제 태그를 선택한다.
부정 셀렉터(해당 조건에 부합하는 태그를 제외한 해당 태그를 선택
input:not([type="password"]) { } : type속성이 password인 input태그를 제외한 모든 input태그 선택 / div:not(:nth-of-type(2)) { }
정합성 확인 셀렉터 (정합성 검증이 된 태그를 선택, 태그의 조건을 만족하는 경우에 선택)
input[type="text"]:valid { } / input[type="text"]:invalid { }
→ ex) <input type="text" required> : 이 경우 반드시 input태그 내부에 입력값이 필요하다
→ ex) <input type="text" value="ab1!" pattern="[a-zA-Z0-9]{4}" required> : 이 경우 input태그 내부에 특수문자를 제외한 4자리 문자를 입력해야 한다.
HTML 구성하기
→ [수직분할] 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치합니다.
→ [수평분할] 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치합니다.
/ 수평으로 구분된 요소에 height 속성을 추가하면, 수평분할을 보다 직관적으로 할 수 있습니다.
→ 큰 3개의 영역은 수직분할 , 내부에 영역은 수평분할이 되어 있음
→ 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법을 Atomic CSS 방법론이라고 한다
/ ex) .w70 { width: 70%; }
→ HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되기도 한다
/ ex) 박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데, <body> 태그가 가진 기본 스타일에 약간의 여백이 있습니다.(margin, padding)
/ ex) width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있습니다. (이전 유닛을 통해 박스 크기 측정 기준(box-sizing)에 대해 학습한 내용입니다.
box-sizing: border-box; 를 이용)
/ ex) 브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다릅니다.
→ 기본 스타일링을 제거하는 CSS 코드를 사용하면 된다.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
→ flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법
- flex 속성
→ 부모 박스요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법
→ 기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치
-------------------------------------- display: flex 적용 ---------------------------------------------------
<div id="outer">
<div class="box target">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
[코드] "display: flex"를 적용시키는 예시를 위해 작성한 HTML 코드
#outer {
display: flex;
border: 1px dotted red;
padding: 10px;
}
.box {
border: 1px solid green;
padding: 10px;
}
[코드] HTML의 div 요소를 선택하여, 부모요소에 "display: flex"를 적용한 예시
-------------------------------------- display: flex 적용 ---------------------------------------------------
Flex 요소에 방향 지정하기 (flex-direction)
→ flexbox는 박스가 수직으로 분할되는 것이 기본값이지만 방향을 설정해주면, 수평으로도 분할할 수 있습니다
→ flex-direction 속성은 부모요소에서 display:flex를 사용할 경우 해당하는 부모요소에서 해당 속성의 속성값에 따라 자식요소의 flex속성의 속성값이 변하는 것에 따라 좌우로 변할지 상하로 변할지 지정해준다.
→ 만약 flex-direction: column 을 사용할 경우 flex 속성을 사용한 자식요소는 수직분할이 된다.(자식요소들이 좌우로 크기 변경)
→ 만약 flex-direction: row을 사용할 경우 flex 속성을 사용한 자식요소는 수평분할이 된다,(자식요소들이 상하로 크기 변경)
- display 속성에 flex를 적용하는 것은 부모 요소에 적용합니다. (display: flex)
- 자식 요소는 flex라는 속성에 값을 적용합니다. (flex: 0 1 auto)
- 주요 속성 : row (기본값), column
→ 자식 박스에 어떠한 속성도 주지 않으면, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치되며 자식요소의 flex 속성을 추가하지 않으면, 다음과 같은 기본값 적용
/ flex: 0 1 auto;
→ flex 속성에 적용되는 세 가지는 기본 크기를 바탕으로 필요에 따라 늘리거나 줄일 수 있는 값이 적용되며 각각의 값이 의미하는 것은 다음과 같다.
/ flex: <grow> <shrink> <basis>
→ flex에 적용되는 grow, shrink, basis도 각 값을 따로 지정할 수 있습니다.
/ flex-grow: 0; / flex-shrink: 1; / flex-basis: auto;
→ grow, shrink 속성은 단위가 없고, 비율에 따라 결과가 달라집니다.
/ 부모 박스 안에 n개의 자식 박스가 있다고 가정할때 각 자식 박스가 갖는 grow값의 총 합이 n이라면, grow 속성의 값을 1로 설정하는 것은 1/n 가로 또는 세로길이를 적용한다는 의미
/ grow 속성의 값을 2로 지정하면, 2/n의 길이를 의미
grow: 자식 박스는 얼마나 늘어날 수 있을까요?(여백을 채운다)
→ target 클래스에서, flex-grow 속성의 값을 1로 변경(1개의 박스 지정)
/ target 클래스를 가지고 있는 첫 번째 자식박스는, 부모 박스의 가로 길이 중에서 남은 빈 영역만큼 늘어납니다.
/ 전체 자식요소가 가진 grow 값의 합은 1+0+0 = 1이므로, target 클래스를 가지고 있는 자식 박스의 가로 크기는 1/1 = 100% 입니다(다른 자식요소는 flex속성을 사용하지 않음)
/ 다른 자식 박스 안에 이미 콘텐츠가 존재하므로, 다른 자식 박스안의 콘텐츠가 담긴 길이를 제외한 나머지 가로 길이가 target 클래스를 가진 자식박스의 가로 길이
.target {
flex: 1 1 auto;
}
[코드] target 클래스에 flex-grow 속성의 값을 1로 설정 / display: flex를 설정한 부모박스의 자식박스중 1개의 박스만 flex-grow속성 값을 변경
[grow 변경후]
→ grow를 1로 지정한 박스가 부모박스의 여백을 모두 차지
[grow 변경전]
→ 이게 기존 크기(여백이 존재한다.)
→ 만약 box 클래스의 flex-grow 속성에 값을 1로 설정하면, 모든 박스가 늘어나려고(grow) 하기 때문에 결과적으로 모든 박스가 동일한 비율로 가로 길이가 늘어납니다.
/ (총 grow 값 1+1+1, 각 박스는 1/3씩 크기를 가짐)
→ flex-grow 속성에 적용하는 값은 비율을 의미, 모든 자식 박스의 flex-grow 속성이 0보다 큰 값을 동일하게 가지는 경우, 각 박스의 가로 길이는 동일한 비율을 가집니다.
/ flex: 1 1 auto; === flex: 2 1 auto; === flex: 3 1 auto; (모든 박스가 동일하게 flex-grow가 1이상 증가하면 동일한 크기를 가진다.
→ 만약 자식 박스 중 하나만 flex-grow의 크기가 더 클 경우 비율이 달라진다
/ ex) 자식 박스가 총 세개인데, 1개만 2의 비율을 가지는 경우
2(target) + 1(box2) + 1(box3) = 4 이므로, 2의 비율을 가진 박스의 비율은 50%
shrink: 자식 박스는 얼마나 줄어들 수 있을까요?
→ shrink는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아집니다.
→ flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다.
→ 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장
→ flex-shrink 속성은 width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문입니다.
→ flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방합니다.
basis: 이 박스의 기본 크기는 몇일까요?
→ 자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기
→ flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지 / 크기는 px로 크기 지정
→ flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지
→ flex-basis 속성이 auto로 설정되어 flex-grow 속성의 영향을 받는다.
→ basis로 설정된 크기가 항상 유지되는 것은 아닌 경우도 존재
/ flex-grow 속성의 값이 1 이상인 경우, flex-basis 속성에 적용한 값보다 커질 수도 있습니다.
→ width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
→ 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
→ (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.
콘텐츠 수평 정렬 (justify-content), 부모 박스가 display:flex사용
→ 부모 박스에 justify-content 속성을 적용하면, 자식 박스를 수평으로 정렬
/ 속성 옵션 : flex-start , flex-end , center , space-between
콘텐츠 수직 정렬 (align-items)
부모 박스에 align-items 속성을 적용하면, 자식 박스를 수직으로 정렬
/ 속성 옵션 : flex-start , flex-end , center , stretch
---------------------------------------------------------------------------------------------------------------------------
- 웹 화면 설계하기
와이어프레임(Wireframe)
→ 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임
→ 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사
→ 와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도
→ 전환 효과나, 애니메이션, 사용자 테스트같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아닙니다.
[POS기(상품 주문 시스템), 메뉴와 카트, 그리고 총 합계가 표시됨]
목업(Mock-up)
→ 대부분의 산업에서 목업은 실물 크기의 모형
→ 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것 / HTML 문서 내에 하드코딩하는 방식
하드코딩이란? HTML문서에 값을 일일이 작성하며 어떤 형식으로 화면에 출력되는지 표시하는 것
[tweet를 만들 경우]
→ 역동적인 웹 어플리케이션을 만들기 위해서는, HTML 문서에 트윗 작성자, 내용을 변수로 관리하여 값을 동적으로 담아야 합니다.
→ 값들을 HTML 문서에 아래와 같이 하나하나 입력해야 하며 이런 방식을 하드코딩이라고 합니다.
- 목업
→ 1) 각 영역을 나눈다
→ 2) 각 영역에서 사용할 component(사용할 태그)를 작성
ex) 네이버 댓글창
- 각 영역 구분(댓글 작성 부분, 댓글 읽은 부분)
- 각 영역에 사용할 component 작성
[댓글 작성 부분]
[댓글 읽는 부분]
→ 3) 각 component에 id와 class명을 설정한다
→ id : 고유한 이름을 붙일 때 사용, class : 반복되는 영역을 유형별로 분류할 때 사용
[목업 표현 방식, 셀렉터 표현 방식 이용]
[구분 했던 영역에 id,class명 작성, #,’.’을 이용한다]
→ 각 영역에 id명을 붙인모습 : ‘태그명#아이디명’ 으로 각 영역을 구분
→ 반복되는 영역은 class값을 이용하여 동일한 영역인것을 표시 / 아이디는 중복불가능
- 추가사항
[border-box 적용방식]
→ 컴포넌트 크기인 px, em, rem, vh 단위 알것
vh : 현재 브라우저의 크기에 맞게 크기가 지정된(반응형 웹 크기, 웹의 크기가 최소화등 크기가 변해도 컴포넌트가 해당 크기에 맞게 알아서 조정됨)
→ text-align : right 을 하면 내부 component가 오른쪽 정렬이 된다.
→ 구글폰트 사용 : <link~>를 <head>내부에 넣고 해당 폰트를 사용할 곳에서 font속성을 사용하면 된다.
→ 네비게이션 바가 스크롤 내리면 투명해지면서 네이게이션 바를 고정해주는 효과