⚡ 개념 정리하기 !
스타일시트
스타일 시트는 내부 스타일 시트와 외부 스타일 시트로 나눌 수 있다.
css를 적용할 html문서 내부에 입력하는 방식으로, <style>태그 내부에 css를 사용한다.
별도 css파일을 생성한 뒤 적용할 html 문서와 연결하는 방식으로, <link>태그를 이용하여 html문서와 css문서를 연결할 수 있다.
선택자 정리
css의 기본 문법은 선택자{속성:속성값;} 의 꼴로 이루어진다.
선택자에는 스타일링할 html 태그를 선택하고, 속성과 속성값에는 선택한 태그의 변경할 속성과 그 값을 입력한다.
선택자에는 p, h1등의 텍스트뿐만 아니라 다양한 객체를 적용시킬 수 있다.
선언부 선언부는 JSP 페이지의 스크립트릿이나 표현식에서 사용할 수 있는 함수를 작성할 때 사용한다. 어떤 기능을 수행하는 단위로서 자바에서는 함수를 메서드(METHOD)라고 부른다. -매개변수 목록 (입력): 작업에 필요한 값들 → 타입 변수명, 타입변수명… (0개~n개) -반환타입 : 메서드가 작업한 작업결과의 타입을 적어주는 것 메서드=선언부+구현부(메서드 호출 시 수행될 코드)
색 표현 방법
RGB 색상
컴퓨터에서 색상은 삼원색인 빨강, 초록, 파랑의 3가지 색의 조합으로 표현한다.
3가지 색상의 앞글자를 따서 RGB라고 하며, 색은 0~255까지 입력할 수 있다.
예를 들어 RGB(255,0,0)은 빨간색 255만 섞었기에 완전한 빨간색이라고 할 수 있다.
이러한 RGB색상은 컴퓨터가 이해하기 쉬운 16진수로 만들어진다.
이것을 우리는 HEX값이라고 부른다. 예를 들면 빨강의 hex값은 #FF0000이다.
<font> 태그 사용
<font color="색상이름 or 색상코드"> 내용 </font>
HTML 태그의 style 속성을 사용하는 방법으로 color를 명시하고 변경 색상을 써주면 된다.
※ HTML 태그는 <body>, <h1>, <div>, <span>, <p>, <li> 등 텍스트를 쓸 수 있는 태그면 아무거나 된다.
font-size 속성
font-size 속성 (폰트 크기 변경)
medium : 웹브라우저에서 정한 기본 글자크기, medium=12pt=19px=13m=100% xx-small, x-small, small, large, x-large, xx-large : medium에 대한 상대적인 크기 smaller, larger : 부모 요소의 글자 크기에 대한 상대적인 글자 크기 length : px, %, em, rem 등으로 크기를 정함
단위 px(pixel); 웹에서 사용되는 가장 기본적인 크기 단위. 해상도와 관련, 해상도에서 1개의 점이 1px. (단점: 크기 조정이 안 됨)
pt(point); 고정된 크기 단위. 주로 인쇄 매체에서 사용됨. (단점: 크기 조정이 안 됨)
rem; html 태그의 폰트 크기를 기준으로 배수에 해당하는 크기를 가지게 하기 위해서 사용하는 단위.
em; 부모 태그의 폰트 크기의 배수를 의미.vw; 화면의 가로 크기와 관련 있는 단위. 1vw는 화면 가로 크기의 1/100.
vh; 화면의 세로 크기와 관련 있는 단위. 1vh는 화면 세로 크기의 1/100. initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음
텍스트 관련 CSS 속성
(1) font-size:(크기 단위값);
크기 단위값 - px, em, rem
(2) color:(색상 표현값);
색상 표현값 - 키워드, 16진수, rgba(R,G,B,A))
(3) font-family:[글꼴], [글꼴유형];
글꼴유형 - generic-family: serif, sans-serif, cursive, fantasy, monospace
(4) font-weight:(굵기 단위);
굵기 단위 - 100~900, normal, bold, bolder, lighter
(5) line-height:(크기 단위 or 배수);
+) text-transform – 텍스트의 대소 문자를 변환 white-space – 텍스트의 공백과 줄바꿈의 처리 방법을 지정 line-break – 요소 내 줄바꿈 규칙을 지정 word-break – 줄바꿈을 위한 단어 규칙을 지정 hyphens – 줄바꿈으로 인해 단어가 나누어질 때 하이픈을 자동으로 삽입하는 방식 지정 overflow-wrap/word-wrap – 단어가 요소 박스의 너비보다 길어져 자동 줄바꿈이 발생했을 때 단어를 나눌지의 여부를 지정 text-align – 단락 내 텍스트의 가로 방향 정렬 방법 지정 text-align-last – 단락의 마지막 줄 텍스트 정렬 방식을 지정 letter-spacing – 글자와 글자 사이의 간격을 지정 word-spacing – 단어와 단어 사이의 간격을 지정 text-indent – 단락의 첫줄 들여쓰기를 지정 text-decoration – 텍스트를 장식 text-shadow – 텍스트에 그림자를 지정
flexbox Flexbox 란 박스나 아이템들을 행이나 열로 자유자재로 배치할 수 있게 해주는 기능이다.
FlexBox를 이용하기 위해서는 우선 container와 item을 만들어줘야 한다.
그 후, container에 display: flex; 를 통해 flexbox라고 지정해줘야 한다.
또한 중심축을 수평축이나 수직축 중 하나로 지정하여 나열되는 방향을 지정해줘야한다.
이를 바탕으로 여러 속성을 토대로 아이템들을 자유자재로 배치할 수 있게 해준다.
container에 사용할 수 있는 속성값은
display, flex-direction(아이템들이 놓일 순서), flex-wrap(줄넘김), flex-flow, justify-content. align-items(어디에), align-content(반대축 아이템) 가 있다.
item에 사용할 수 있는 속성값은
order, flex-grow, flex-shrink, flex, align-self가 있다.
⚡ 토론해보아요 !
<link> 태그의 활용 방안을 고민해보아요 !
link 태그는 CSS를 활용할 때 HTML에 별도의 파일을 연결하여 사용할 때 쓰게 된다.
예를 들어 별도로 style.css를 만든다면 HTML에 <link href="style.css" red="stylesheet">라고 해주면 된다.
이 외에는 다른 파일이나 사진 등을 연결 시킬 때 쓸 수 있을 것 같다.<link> 태그는 스타일 시트를 연결할 때 사용되고, 기본적으로 rel 속성과 함께 사용해 스타일 시트로써 문서를 불러온다.
href 속성과도 함께 사용되는데, href 속성 같은 경우 연결될 문서를 설정할 수 있기 때문에 파일 관리가 수월해지고
단일파일만을 사용했을 때 발생할 문제들을 완화할 수 있을 것 같다.id=”the toppest”), href에 해당 id를 링크한다(ex. href=”the toppest”).내/외부 스타일 시트와 스타일 속성 중 어떤 것을 자주 이용할 것 같나요?
CSS 게임을 하면서 많이 틀린 부분이 있다면 설명해보아요 !
space-between’과 ‘space-around’가 가장 헷갈렸다.
특히 개구리들을 간격을 두고 일렬로 정렬할 때 ‘space-around’값만 입력하면 통과되는 단계였는데,
‘center’를 사용해 가운데로 보낸 다음에 ‘space-between’으로 간격을 만들려고 하는 실수를 한 게 기억에 남는다.
그리고 사실 다른 것보다도 justify-contetnt, align-items, flex-direction, order 등등
어떤 속성에 어떤 속성값이 있는지가 계속 헷갈려서 많이 틀리고 여러 번 확인하면서 진행했다.Space-between은 첫번째 플렉스 항목과 마지막 항목을 시작점과 끝점에 배치한 후 중앙 항목을 같은 간격으로 배치하고,
space-around는 모든 항목을 같은 간격으로 배치한다는 점에서 차이가 있지만, 게임을 할 때에는 차이를 느끼지 못해 어려웠다.space-around space-even, space-between 사이의 다른 점을 잘 구분이 안 가서 어려움이 있었던 것 같다.
또한 CSS diner 게임은 무슨 게임인지 잘 이해가 가지 않는다.