[XTML/CSS] 개발자 지망생 스터디

[XTML/CSS] 개발자 지망생 스터디 - 2일차

스터디/KAKAOCLOUDSCHOOL 2022. 11. 4. 21:32

XHTML 요소

■ 영역 태그

▶ div (division)

→ 블럭 요소 (Block Element)

→ 기본적으로 좌우에 다른 요소가 배치될 수 없음.

→ 영역을 만들 때 자주 사용 됨.

→ 사용 형식

<div>
   블록 요소(Block Element)
</div>

▶ span

→ 인라인 요소 (Inline Element) 이므로 <p>와 <ul> 요소와 같은 블록 요소를 포함할 수 없음.

→ 기본적으로 좌우에 다른 요소가 배치될 수 있음

→ 사용 형식

<span>
  인라인 요소(Inline Element)
</span>

▶ iframe

→ 다른 웹 문서를 가지고 와서 표시하는 요소

→ 속성

- width, height

- name

- seamless

- src : 표시할 문서의 URL

→ 사용 예 : 카테고리(ex:해외 야구, 축구 등) 버튼 클릭시 변경되는 사이트를 만들수 있는 태그

CSS

■ CSS (Cascading Style Sheet)

▶ 웹 페이지에 " 디자인 "이라는 시각적 가치를 부여하기 위한 언어. 즉, HTML 문서에 시작적인 효과를 부여하기 위한 언어

▶ HTML code 작성 시, 위 또는 아래에 코드를 위치해도 상관 없이 동작함.

▶ CSS의 표준 : Level CSS2.1, 3

■ 작성 방법

▶ external : 별도의 파일에 작성하고 가져와서 사용 함.

▶ internal : HTML 문서안에을 만들고 작성

▶ inline : 태그 안에 style 속성에 작성

■ 기본 선택자

▶ *(asterisk) : 전체 사용자로 모든 요소에 적용

▶ tag : 태그 선택자

▶ .class : class 선택자

→ 여러 요소를 그룹화하기 위해서 사용, 대부분 스타일 적용에 사용

▶ #id : id 선택자

→ 문서 내에서 구별하기 위해서 사용, 대부분 자바스크립트에서 사용

🎲 기본 선택자 실습

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>기본 선택자</title>
    </head>
    <body>
        <h1>제목 태그</h1>
        <p class="paragrah">문단 태그</p>
        <p class="paragrah">문단 태그</p>
        <p>문단 태그</p>
        <p id="identifier">문단 태그</p>
        <style>
            h1{
                color:orange;
            }
            .paragrah{
                color:blue;
            }
            #identifier{
                color:mediumaquamarine;
            }
        </style>
    </body>
</html>

■ 속성 선택자

▶ 선택자[속성] : 선택자 안에 속성이 존재하는 경우만 적용

<a href=“https://kakao.com”>카카오</a>
<a>카카오</a>

a[href]:{}

▶ 선택자[속성=값]: 선택자 안에 속성의 값까지 일치하는 경우만 적용

input[type=“text”]{}

→ Input 태그 중에서 type이 text인 경우에만 적용

▶ 부분 일치

→ A^=B : A속성의 값이 B로 시작하는 경우

→ A$=B : A속성의 값이 B로 끝나는 경우

→ A*=B : A속성의 값에 B가 포함된 경우

■ 복합 선택자

▶ 일치 선택자 : 선택자1선택자2...

→ 공백없이 여러선택자를 나열하면 모든 선택자가 일치해야 함.

→ div.content{} ->div태그 중에서 class 속성이 content인 경우에 적용

▶ 자식 선택자 : 선택자1 > 선택자2 (왼쪽 부등호로 구분)

→ 선택자1에 포함된 선택자2 인데 바로 아래 레벨이 있어야 함.

<div><span></span></div>
<div><ul><span></span></ul></div>

→ div > span 으로 작성하면 위의 경우에만 적용

▶ 하위 선택자 : 선택자1 선택자2 (공백으로 구분)

→ 부모 요소에 포함된 모든 자식 요소를 대상으로 스타일 적용. (선택자2가 선택자1에 포함되어 있으면 적용)

<div><span></span></div>
<div><ul><span></span></ul></div>

→ div span 으로 작성하면 위의 모든 경우에 적용

▶ 인접 형제 선택자 : 선택자1 + 선택자2 (플러스 기호로 구분)

→ 선택자1과 동일한레벨에서 다음에 나오는 선택자2에 적용

<h1>대제목</h1>
<h2>제목1</h2>

<h2>제목2</h2>

→ h1 + h2 : 이 경우 제목1에만 적용

▶ 형제 선택자 : 선택자1 ~ 선택자2

→ h1 ~ h2 : h1과 동등한 레벨에 있는 모든 h2에 적용

▶ 그룹 선택자 : , 로 구분

→ , 와 함께 나열하게 되면 나열된 선택자 중에 포함되면 적용

■ 의사 클래스 (seudo-classes selector)

▶ 상황에 따라 스타일을 적형하는 방법으로 선택자 뒤에 : 을 하고 작성

→ Link

- link (a : link = 링크에 모두 적용)

- visited (a : visited = 링크에 한번이라도 누른 경우 적용)

→ 동작

- hover : 마우스가 올라오면

- active : 마우스를 누르면

- focus : input에서 포커스가 오면

→ UI 요소 상태

- checked : 체크상태

- enabled : 활성화

- disabled : 비활성화

▶ 구조 선택자

→ root : 최상위 요소

→ first-child, last-child : 첫 번째 자식 요소 와 마지막 자식 요소

→ nth-last-child(n) : 뒤에서 n 번째 자식 요소

→ nth-child(n) : n 번째 자식 요소

→ only-child : 자식이 하나인 요소

→ not(선택자) : 부정 요소

→ empty : 자식이 없는 요소

→ first-line, first-letter

→ only-child : 형제가 없는 요소

→ nth-of-type(n), first-of-type, last-of-type, only-of-type(타입이 하나인 요소)

▶ lang(languagecode): 특정 언어 설정에만 적용

→ 언어코드 2자리 - 국가코드 2자리

- Ex) ko-KR, en-US…

▶ 의사 요소 (pseudo-elements) 선택자

→ ::first-letter

→ ::first-line

→ ::before

→ ::after

→ ::selection

■ 상속

▶ 하위 요소가 상위요소의 값을 물려받는지 여부

▶ 속성 별로 다르게 적용되는데 폰트 관련된 속성은 대부분 상속됨.

▶ 어떤 속성이 상속되지 않는 경우, 상속을 받고자 하면 inherit 로 값을 설정하면 됩니다.

■ 우선 순위

▶ 하나의 요소에 동일한 속성의 값을 2개 이상 적용하는 경우 충돌이 발생

→ 마지막에 작성된 요소가 우선순위를 가짐.

→ 태그 안에 작성한 style이 우선 순위가 가장 높음

→외부 파일에 작성한 것과 <style> 태그 안에 작성한 것은 나중에 작성한 것이 우선 순위가 높음

▶ 동일한 방식으로 작성된 경우, 특정도를 가지고 우선 순위를 적용

선택자	사용 예	특정도
type 선택자	p	1
class 선택자	.class	10
id 선택자	#id	100
inline 스타일	style="color:red:	1000
가상 요소	:first-line	1
가상 클래스	:hovor	10

■ 단위 (Unit)

▶ 절대단위 : 불변의 단위

→ cm

→ mm

→ in

→ px : 픽셀로 1/96인치 해상도 같은 것을 표현할 때 주로 사용하는 단위

- 1920 * 1024의 경우 가로 1920점, 세로 1024점을 출력할 수 있다라는 의미

- 화면의 확대 축소에 따라 변하기도 하기 때문에 상대 단위라고 하기도 함

→ pt : 1/72 인치

→ pc : (파이 카) 12pt

▶ 상대단위 : 화면 크기나 디바이스 크기에 따라 다르게 적용

→ px

→ %

→ em : font-size가 기준, 글꼴 크기가 16px

- 1 em = 16 px

- rem은 최상위 요소의 글꼴 크기

- 주변의 글자 보다 크기가 1.5배 되도록하고자 할 때는 1.5em

→ ex : 소문자 x의 높이로 em의 절반

→ ch : 숫자 0의 너비

▶ 각도

→ deg

→ rad

▶ 디바이스 크기의 다양화

→ 화면 출력을 할때는 상대 단위 를 권장

→ 인쇄를 할 때는 절대 단위 를 사용하는 것을 권장

■ Typography : 문자 또는 기호를 중심으로 한 2차원적 표현

▶ font-family : 폰트 나열

→ 폰트가 없을 때 다른 폰트를 적용하기 위해서 나열

- EX) font-family : 돋움, sans-serif // 돋움이 없으면 sans-serif를 적용

▶ @font-face

→ 폰트가 없을 때 다운로드를 받을 수 있도록 해주는 속성

@font-face{
	font-family:글꼴 이름
	src:url(글꼴 파일의 경로) format(파일 유형)
}

▶ font-size : 글꼴 크기

→ 키워드(xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger…)로 설정 가능

→ 직접 단위 설정 가능

❗️em 단위로 설정하는 것을 권장

▶ font-weight : 글자 두께

→ 100 ~ 900 까지 100단위로 설정 가능

→ normal, bold, bolder, lighter와 같은 키워드 설정 가능

▶ font-style

→ italic을 설정하면 기울임

▶ font-variant

→ small-caps 를 설정하면 소문자를 작은 대문자로 변형

▶ font

→ 앞의 6가지를 한꺼번에 적용하기 위해서 사용

- Font:weight style variant size line-height font-family 다른 모든 속성은 생략이 가능

- font-size와 font-family는 생략 불가

▶ color : VS code에는 사용을 잘 하지 않음 (코드 센스로 색상 추출 기능을 제공)

→ 요소의 전경 색상

- 대부분 글자에만 적용됨

→ 키워드로 설정할 수 있음

→ #16진수 6자리

→ rgb(0~255까지의 숫자 3개 나열)

→ 3개 숫자 대신 백분율로 설정할 수 있음

→ rgba 사용시 투명도 설정이 가능. hsl도 있음

→ 색상 키워드

- 참조 : https://www.learningwebdesign.com/colornames.html

→ 색상 추출

- 참조 : https://www.webfx.com/web-design/color-picker

▶ text-decoration

→ 밑줄이나 취소선 등의 효과를 설정

→ none, underline, overline, line-through, blink 등으로 설정

→ a 태그를 이용해서 버튼 효과를 나타낼 때, none으로 설정하는 경우가 있음.

- a 태그에 밑줄을 긋는 것 보다는 색이나 두께로 알려주는 것을 권장

- 일반 텍스트에는 underline을 사용하지 않고 강조를 하고자 한다면 italic으로 기울임을 설정하는 것을 권장

▶ text-transform

→ 영문의 대소문자 변환을 설정

→ none, uppercase, lowercase, capitalize 등을 이용.

▶ white-space : 설명문을 만들때 주로 사용

→ 공백 문자 설정

- normal : 여러 개의 공백을 하나로 처리

- nowrap : 여러 개의 공백을 하나로 처리하고 영역 너비를 넘어가면 줄 바꿈하지 않고 한 줄로 표시

- pre : 여러 개의 공백을 그대로 처리하고 영역 너비를 넘어가면 줄 바꿈하지 않고 한 줄로 표시

- pre-wrap : 여러 개의 공백을 그대로 처리하고 영역 너비를 넘어가면 줄 바꿈하여 표시

- pre-line : 여러 개의 공백을 하나로 처리하고 영역 너비를 넘어가면 줄 바꿈하여 표시

■ Paragraph : 문단 관련 속성

▶ text-align

→ 문단의 가로 정렬

→ 셀이나 인라인 요소에 적용할 때는 내용보다 너비가 더 커야 설정됨.

- start, end, left, center, right, justify(문단의 시작을 왼쪽에 끝을 오른쪽에 맞추어 여백을 조정)

▶ text-justify

→ text-align에 justify를 적용했을 때 공백을 조절

- auto : 웹 브라우저가 조절

- none : 정렬하지 않음

- inter-wood : 단어 사이의 공백을 조절

- distribute : 글자 사이의 공백을 조절

▶ text-indent

→ 첫 줄 들여쓰기

→ 양수를 설정하면 들여쓰기 이고 음수를 설정하면 내어쓰기

▶ letter-spacing

→ 문자 사이의 간격

▶ line-height

→ 문단의 행 사이의 간격

▶ word-break

→ 줄 바꿈 옵션

→ 주로 keep-all 을 사용하며 설정하면 단어 단위 줄 바꿈

▶ direction

→ rtl을 설정하면 오른쪽에서 왼쪽으로 출력 (주로 아랍어에서 사용)

▶ vertical-align

→ 인라인 요소끼리으 세로 위치를 설정

- sub, super, top, text-top, middle, bottom, text-bottom

- 이미지 주위에 텍스트를 배치할때 많이 이용

■ text-shadow

▶ 글자에 그림자 효과

▶ CSS3에서 추가된 속성으로 구형 브라우저에서는 적용이 안됨

▶ 수평 오프셋, 수직 오프셋, 흐릿해지는 반경, 색상 순으로 설정

→ 수평 오프셋, 수직 오프셋이 일치하면 하나만 설정해도 무관

▶ 속성을 나열한 후 ,를 하고 다시 설정하면 여러 개 적용이 가능

■ list

▶ list-style-type

→ 목록의 머리 부분 설정

- None, disc, circle, square, decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman

- lower-roman, upper-latin, lower-latin, lower-greek, Armenian, Georgia, katakana, hiragana

▶ list-style-image

→ 이미지 파일을 마커로 사용

→ url(이미지 파일의 경로)

▶ list-style-position

→ 마커의 위치

→ Inside와 outside를 설정할 수 있음.

▶ list-style에 3가지를 동시에 설정 가능

→ 이 경우는 type, position, image 순으로 작성

■ background

▶ background-color

→ 배경색으로 color와 동일한 방식으로 설정

▶ background-image

→ 배경 이미지를 설정하는 것으로 url(경로)

→ >> ,를 이용해 여러 개 적용이 가능함. 순서대로 적용이 됨.

▶ background-repeat

→ 이미지의 반복을 설정

→ 이미지가 배경보다 작을 떄 적용

→ repeat, repeat-x, repeat-y, no-repeat 설정 가능

▶ background-position

→ left, right, center, top, bottom, 직접 숫자 입력 가능

▶ background-attachment

→ 스크롤 할 때 이미지의 이동 여부

→ fixed를 설정하면 이미지 고정이 되고, scroll을 설정하면 배경 이미지도 스크롤 됨.

▶ background-size

→ 배경이미지의 크기

- auto : 원본 이미지 크기 그대로 출력

- 숫자 2개 : 너비와 높이

- 숫자 1개 : 너비 설정이고 높이는 auto

- cover : 너비와 높이 비율을 맞추어서 확대하거나 축소하는데 큰 값을 적용

- contain : 너비와 높이 비율을 맞추어서 확대하거나 축소하는데 작은 값을 적용

▶ background-clip

→ 적용 범위

- border-box : 테두리까지 적용

- padding-box : 테두리를 제외

- content-box : content에만 적용

▶ background

→ color, image, 반복여부, position, attachment를 한꺼번에 적용하기 위한 속성

■ gradation : CSS3 에서 지원하는 것으로 여러 색상을 혼합해서 사용하는 속성

▶ vendor-prefix

→ CSS3의 기능 중에는 표준으로 채택되지 않아 브라우저 별로 별도로 기능을 제공할 때 사용하는 기호

- 사파리나 크롬 : -webkit- 을 추가

- 파이어폭스 : -moz-

- MS : -ms-

- 오페라 : -o-

→ CSS3는 현재도 표준을 계속 추가

→ 때문에 vendor prefix를 이용하는 기능 중에는 최신 브라우저를 사용하면 vendor-prefix를 생략해도 되는 경우가 있음.

▶ linear-gradient

→ 선형 그라데이션

→ 각도, 색상 값을 나열

→ vendor prefix 이용

▶ radial-gradation

→ 원형 그라이데이션

→ radial-gradient

- 시작점의 위치, circle의 모양, 색상 나열

▶ 그라데이션을 직접 생성하는 것은 쉽지 않음

→ 참조 : http://www.colorzilla.com/gradient-editor 에서 코드 복사 후 사용하는 것이 편리함.

■ Box Model

▶ 영역에 대한 설정

→ width : 콘텐츠 영역의 너비

→ height : 콘텐츠 영역의 높이

→ border : 경계선

→ padding : 경계선과 콘텐츠 사이의 여백

→ margin : 영역과 영역 사이의 여백

▶ padding 과 margin은 서로 여백을 나타내므로 구분을 명확히 해야함.

▶ IE의 호환 모드

→ IE의 하위 버전들은 padding을 width와 height에 포함시켜 계산

- Width:100px

- Heigh:100px

- Padding:30px

→ 일반 브라우저들은 160px (100+30+30) 을 확보해서 표시

→ IE 하위 버전은 100px 만을 확보해서 표시

▶ margin collapsing(마진 겹침)

→ 연속배치된 요소들에 마진을 전부 설정하면 마진은 중복 적용되지 않고 큰 값 1개만 적용

▶ box-sizing

→ box의 크기를 설정할 때 기준을 정하는 것

→ content-box를 설정하면 내용을 기준으로 box의 크기를 설정

→ border-box를 설정하면 경계선을 기준으로 함

▶ 크기 설정

→ width와 height를 가지고 설정

→ max-height, min-height, max-width, min-width를 이용해서 최대 및 최소 크기를 설정하는 것도 가능

▶ 여백 설정

→ padding과 margin으로 설정

→ padding 이나 margin에 하나의 숫자를 설정하면 좌우 상하에 동일하게 적용

→ 상하좌우 여백을 따로 설정하고자 하면 -left, -right, -top, -bottom 을 이용해서 설정.

▶ visibility

→ 요소의 내용을 숨기거나 표시하고자 할 때 사용하는 속성

→ visible, hidden, collapse로 설정

▶ overflow

→ 내용이 영역보다 큰 경우의 옵션 설정으로 visible, hidden, scroll, auto가 있음.

▶ text-overflow

→ text가 영역보다 긴 경우의 옵션 설정으로 clip(내용을 잘라서 보이지 않음)과 ellipse(…을 표시)를 설정할 수 있음.

→ 영역보다 큰 경우 더 보기 같은 버튼을 만들어서 출력하는 경우가 많음.

→ 페이스북 앱은 text가 많은 경우 …과 더 보기 기능을 제공

- 더 보기 를 누르면 아래가 펼쳐지는 형태로 디자인함.

- 이러한 디자인을 카드형 레이아웃 이라 부름.

▶ floating

→ 블록 요소 주위에는 다른 요소가 배치될 수 없음.

→ 블록 요소 주위에 다른 요소를 배치하고자 할 때

- 블록 요소를 inline 요소로 변경하거나 float 속성을 이용해서 영역은 차지하지만 공중에 떠 있는 형태로 만들어서 할 수도 있음.

→ float 속성에는 left, right, none을 설정할 수 있음.

❗️인라인 요소에도 float 속성을 설정할 수 있는데 인라인 요소에 float 속성을 설정할 때에는

width, height를 설정하는 것이 좋음. 설정하지 않으면 콘텐츠를 표시하는 영역이 최대한 확장이 되버림.

→ float 속성이 적용된 상태에서 해제

- clear 속성에 none, left, right, both를 설정해서 해제 : 블록 요소에서만 가능

- overflow 속성에 auto나 hidden을 설정해서 해제 : 부모 요소에 설정

- float 속성을 부모 요소에 설정해서 해제

▶ 크기 조절

→ resize 속성에 horizontal 이나 vertical, both를 설정해서 크기 조절이 가능하도록 할 수 있음

▶ 그림자 설정

→ box-shadow : 수평오프셋 수직오프셋 흐릿함과 확산 정도 색상

→ 수평 오프셋 앞에 inset을 설정하면 그림자가 내용 안으로 출력.

▶ 경계선

→ border-style : 경계선의 모양

- none, dotted, dashed, solid, double, groove, ridge, inset, outset을 설정.

- 그냥 사용하면 상하좌우 경계선이 모두 동일한 모양이 됨.

- border-left-style, border-right-style, border-top-style, border-bottom-style 설정 = 방향 별로 설정

→ border-width : 경계선의 두께

- thin, medium, thick으로 설정할 수 있고 값과 단위를 직접 지정할 수 있음.

- 방향 별로 설정할 수 있음

→ border-color : 경계선의 색상

→ border : 두께 종류 색상을 한꺼번에 설정

→ border-radius : 경계선에 라운드 효과를 설정

- CSS3에서 추가된 설정

- 값을 1개만 설정하여 상하좌우 모두 동일한 값으로 적용 가능

- 숫자 4개를 설정해서 상하좌우를 다르게 설정 가능

- ,로 구분하고 다시 설정해서 여러개의 값을 적용 가능

→ image border (이미지 보더) : 보더에 이미지 설정 가능

- border-image-source:url(이미지 파일 경로)로 설정

- border-image-slice: 값 4개로 잘라내기 설정

- border-image-repeat : stretch, repeat, round, space 중 하나의 값을 설정해서 반복 여부를 설정

- border-image-width : 숫자로 두께 설정

- border-image-outset : 숫자로 경계선과의 거리를 조정

→ display : 박스의 보기 모드를 변경

- block : 블록 요소로 만들어 짐

- inline : 인라인 요소로 만들어지는데 height가 무시

- inline-block: 인라인 요소로 만드는데 주위에 콘텐츠가 배치 되지 않고 height 가 적용

→ opacity : 불투명도 설정

- 0과 1사이의 소수로 설정하는데 1이면 100% 불투명이 되고 0이면 투명

→ position : 요소의 배치 방법을 지정하는 속성으로 기본 값은 static

- static : 위치 기준이 없는 것으로 순서대로 배치하는 것인데 left나 top을 사용할 수 없음.

- relative : 이전에 출력된 내용과의 관계를 이용해서 출력되는데 이 경우에는 left 나 top를 이용해서 이전 내용과의 거리를 설정

- absolute : 부모의 왼쪽 위를 기준으로 해서 배치되는 것으로 left 나 top을 이용해서 부모에서의 위치를 설정

- fixed : 웹 브라우저의 스크린 기준으로 배치되는 방식 >> 광고 배너에 자주 사용됨.

- sticky : 스크롤 영역을 기준으로 배치

- absolute 나 fixed를 설정하면 그 요소의 display는 block으로 자동 변경됨

→ 위치 : left, right, top, bottom을 이용해서 위치를 설정

→ z-index : 겹쳐서 출력할 때 순서 설정

- 숫자가 클수록 위에 배치가 됨.

■ display:flex

▶ 하나의 컨테이너를 생성해서 요소들을 가로나 세로 방향으로 배치하는 레이아웃

▶ 모바일 웹에서 가로 방향으로 요소들을 배치해서 가득 채우고자 할 때 사용

▶ 정렬 방법이나 크기 방법등을 설정해서 사용

▶ flex 레이아웃이라 부르기도 함.

■ 다단

▶ 가로 화면을 여러 개로 분할해서 콘텐츠를 배치하는 것으로 모바일에서는 가독성의 이유로 잘 사용하지 않음.

▶ 모바일은 가로는 가득 채우고 세로로 스크롤 할 수 있도록 만들기 때문에 내용이 많으면 세로 방향으로 스크롤 하도록 해서 출력함.

■ Table

▶ Table 관련 display 속성

→ 과거에는 서버가 데이터를 xml로 주는 경우가 많았음

→ xml로 전송된 데이터를 표 형태로 출력을 할려고 하면

- 데이터를 파싱해서 객체로 변환한 후 테이블 태그를 이용해서 출력

- 이를 편리하게 하고자 할 때 display 속성을 이용하였음.

▶ table-layout

→ fixed를 설정하면 셀의 너비가 고정되고 auto를 설정하면 셀의 너비가 셀의 내용에 따라 변경됨

▶ caption-side

→ 캡션의 위치를 설정하는 것으로 top과 bottom을 설정할 수 있음.

▶ border-collapse

→ 테두리 관련 속성으로 기본값은 separate 인데 이 값은 표와 셀의 테두리가 구분되는 것

→ collapse로 설정하면 표의 테두리와 셀의 테두리가 한 묶음으로 만들어짐.

▶ border-spacing

→ 테두리의 간격으로 border-collapse가 separate 일 때 적용

▶ 셀 안에서의 정렬

→ 상하 정렬은 vertical-align 속성에 baseline, top, middle, bottom 으로 설정

→ 좌우 정렬은 text-align 속성에 left, right, center, justify 로 설정

▶ empty-cells

→ 빈 셀의 표시 여부로 show 로 설정하면 빈 셀이 보이고 hide로 설정하면 빈 셀이 보이지 않음.

■ cursor

▶ 커서 모양을 변경하는 것으로 url(이미지 파일 경로)로 설정할 수 있고, keyword를 이용해서 설정하는 것도 가능

■ outline

▶ 외곽선 속성으로 border와 동일한 방식으로 설정 가능한데 color에 invert를 이용해서 반전 효과를 만들 수 있음.

■ 변환(Transform - 행렬을 이용) 과 애니메이션

▶ 2D 변환

→ 이동 : 더하기

- translate(x축 이동값, y축 이동값)

- translatex(x축 이동값)

- translatey(y축 이동값)

→ 크기 변환 : 곱하기

- scale(가로 비율, 세로 비율)

- scalex(가로 비율)

- scaley(세로 비율)

→ 회전

- rotate(각도 deg)

→ 비틀기

- skew(x축, y축)

- skewx(x축)

- skewy(y축)

→ 한꺼번에 적용 : matrix(scaleX, skewX, skewY, scaleY, translateX, translateY)

→ 변환 기준점 설정 : transform-origin

■ 반응형 웹

▶ 화면의 크기에 따라 콘텐츠의 배치를 다르게 해서 동일한 콘텐츠를 사용할 수 있도록 디자인 하는 것
→ CSS의 Media Query와 meta 태그의 viewport 속성을 직접 설정해서 구현

→ 또는 bootstrap 같은 외부 라이브러리를 이용해서 구현

'스터디 > KAKAOCLOUDSCHOOL' 카테고리의 다른 글

[JavaScript] 개발자 지망생 스터디 - 6일차 (0)	2022.11.09
[JavaScript] 개발자 지망생 스터디 - 5일차 (0)	2022.11.08
[JavaScript] 개발자 지망생 스터디 - 4일차 (0)	2022.11.07
[JavaScript] 개발자 지망생 스터디 - 3일차 (0)	2022.11.04
[XHTML] 개발자 지망생 스터디 - 1일차 (0)	2022.11.01

ABOUT ME

IT study IT study

XHTML 요소

CSS

'스터디 > KAKAOCLOUDSCHOOL' 카테고리의 다른 글

티스토리툴바

ABOUT ME

XHTML 요소

CSS

'스터디 > KAKAOCLOUDSCHOOL' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바

XHTML 요소

CSS