4/6 (목)
👥 조별 과제
⚡ 개념 정리하기 !
웹페이지의 여러가지 스타일(폰트의 종류와 크기, 여백,배경색, 정렬방식,위치지정) 을 간편하게 하도록 만들어준다.
주요 스타일 시트에는 css와 xsl등이 있다.
css는 xsl에 비해 상대적으로 간단하게 사용이 가능하며,
xsl은 좀더 복잡하지만 섬세하게 스타일을 조정할 수 있다.(하지만 xsl을 사용하려면 HTML에서는 사용할 수 없고, XHTML이나 XML에 대해서만 사용이 가능하다.)
type selector(유형 선택자):
div{}를 적용시킬때 에는 섹션을 나누는 태그에 적용해주는 것이 좋다.
universal selector(전체 선택자) :
{}이렇게 적용시킨다. html 문서의 패딩(요소 내부 간격)과 마진(요소 내부 간격)을 초기화 시켜줄때 주로 사용한다.
아이디 선택자 :
css 문서에서는 #id_name{}형식으로 스타일 지정
html 문서에서는 <div id=”id_name”> </div>로 사용
클래스 선택자 :
css 에서는 .calss_name{}
html 에서는 <div calss=”calss_name”> </div>
자식 선택자 :
>를 통해 사용 calss를 자식요소 들에게 부여하지 않고 코딩의 단순화가능. 자손(하위) 선택자 : 공백으로 사용
인접 선택자 : +로 사용
일반 (형제) 선택자: ~사용
속성 선택자(attribute selector) :
*element[attr=”value”] element[attr^=”value”] element[attr$=”value”] element[attr*=”value”]
구조적 가상요소 선택자 :
:last-chile :nth-child(n) n번째요소의 child를 선택할때 사용
스타일링 하고 싶은 속성과 값을 작성하는 영역
{속성:속성값;}속성과 값은 콜론으로 구분되어진 한 쌍으로 작성됨, 항상 마지막에 세미콜론(;)을 작성해 주어야 함, 속성과 속성값이 한 쌍 또는 여러 쌍이 모여서 선택자로 선택된 태그에 일괄적으로 적용됨, 세미콜론으로 하나의 속성과 속성값의 끝을 표현해주면 여러 개 사용 가능
ex) p{color:blue;} = 모든 p 태그를 선택, 텍스트 색상(속성), 파란색(속성값)
color 속성 :
텍스트의 색상을 변경, 직관적인 성격
CSS에서 색상을 표현하는 방법
키워드(keyword) :
색상의 영문 이름을 값의 키워드로 사용하는 방법
RGB(RedGreenBlue) :
rgb(R,G,B) 소괄호 안에 0~255 범위의 수치를 입력, rgba에서 a는 알파값(alpha)을 의미하며 투명도(opacity)를 나타냄
HEX(16진수) : #RRGGBB
font-size css속성은 폰트의 크기를 지정한다. 폰트 크기를 바꾸면 em 과 ex, <length> 단위로 계산된 다른 항목들의 크기를 바꾼다.
medium :
웹브라우저에서 정한 기본 글자크기
xx-small, x-small, small, large, x-large, xx-large :
medium에 대한 상대적인 크기
smaller, larger :
부모 요소의 글자 크기에 대한 상대적인 글자 크기
length :
px, %, em, rem 등으로 크기를 정함
initial :
기본값으로 설정
inherit :
부모 요소의 속성값을 상속받음.
<length>는 항상 양수이다. 단위가 em 이나 ex 로 표현되어 있으면, 부모 엘리먼트의 크기에 상대적으로 정해진다.
아이템들을 정렬할 때 쓰이는 개념 박스에 지정하는 속성값이 있고 박스 안에 들어가는 아이템의 속성 값이 있음 중심축과 반대 축이 있음 (직각) 박스에 지정하는 속성값들:
display: flex; -> 아이템들이 자동으로 정렬 flex-direction:
row; (기본 왼->오) (아이템들 정렬) row-reverse; (오->왼) (순서 바뀜) column; (수직을 메인으로 위->아래) column-reverse; (아래->위) (순서 바뀜)
flex-wrap:
nowrap; 기본값 꽉차도 그대로 wrap; 아이템들이 한 줄에 꽉차게 되면 밑줄로 내려감
flex-flow:
wrap direction 한번에 지정 가능 ex) flex-flow: column wrap;
justify-content:
flex-start; 중심을 기준으로 왼쪽으로 정렬 flex-end; 중심을 기준으로 오른쪽으로 정렬 (column-reverse와 달리 아이템 순 서 바뀌지 x center; 중심부에 정렬 space-around; 아이템 사이에 간격(간격다름)을 생기게 함 양 끝부터 간격 생김 space-evenly; 아이템 사이에 일정한 가격으로 간격이 생기게 함 space-between; around와 달리 양끝에도 간격 생김 align-itmes: 중심 축의 반대를 기준으로 배치 y축이 중심축 의 반대일 때center라고 하면 y축 기준으로 화면의 중앙에 배치
align-content:
justify-content와 동일하나 중심 축의 반대 기준으로 배치
박스 안에 들어가는 아이템의 속성을 지정하는 속성값들:
본래 정렬에서 벗어나 정렬 순서를 정할 수 있음 원래 위치에서 +- 값으로 지정
flex-grow:
창의 크기가 커질 때 크 창의 여백을 채우기 위해 늘어남
값을 지정할 때 배율로 늘어나는 비율을 지정 가능
flex-shrink:
grow의 반대 작아질 때 grow처럼 값을 지정해서 비율을 지정 가능
flex-basis:
아이템들이 공간을 얼마나 차지하는 지 세부 조정가능(기본 값 auto) 퍼센트로 얼마나 차지할 지 비율 조정가능
align-self:
아이템 별로 아이템 조정 가능 (아이템 하나만 센터로 보내는 등)
⚡ 토론해보아요 !
(1) 웹페이지에서 하이퍼링크를 사용할 수 있다. (2) 웹페이지에서 외부 이미지를 사용할 수 있다. (3) 외부 스타일시트 지정이 가능하다.
태그를 사용해 외부 스타일 시트를 포함할 수 있다. 다른 문서나 파일을 불러오고 싶을 때 사용할 수 있을 것이다.
외부 스타일 시트 내부 스타일 시트는 자신이 속해 있는 페이지에만 영향을 줄 수 있기 떄문에 외부 스타일 시트를 좀 더 유용하게 사용할 수 있을 거 같다.
웹 페이지가 복잡해지면 복잡해 질수록 지정해야할 스타일을 늘어날 것이므로 , 외부 스타일 시트를 사용함으로써 조금 더 체계적으로 스타일 시트 관리가 가능할 것 같다.
승우 : 지정해 주어야할 id나 class가 많아질수록, 순서를 지켜서 쓰는 것이 어려웠다.
아영 : CSS 명령어가 익숙하지 않아 원하는 결과를 얻기 위한 적절한 명령어를 찾기 어려웠다.
세하 : 아직 용어들이 익숙하지 않아서 계속 헷갈리고 어려웠다. 따라서 게임을 하면서 앞으로 스터디 복습을 열심히 해야겠다고 느꼈다.
석민 : 전반적으로 난이도가 높았던 게임은 CSS선택자 연습을 하는 flukeout이였지만 CSS Flex를 연습하는 flexboxfroggy 게임은 전반적으로 쉬웠으나 24번 마지막 문제에서 노란 개구리와 초록 빨간 개구리 두 열이 잘 바뀌지 않아서 슬펐어