CSS

스타일 시트 브라우저 기본 스타일 사용자 스타일인라인 스타일내부 스타일 : 같은 문서 안에 스타일 태그를 넣어 정리한 것 외부 스타일 자바 스크립트 내부 자바스크립트 외부 자바스크립트

기본형 color : <색상>\*\*<span style="background-color: - RR(Red) GG(Green) BB(Blue)의 양을 표시함. 각 색상마다 하나도 섞이지 않았음을 표시하는 00부터 해당 색이 가득 섞였음을 표시하는 ff까지

font-family: <글꼴 이름> | \[<글꼴 이름>, <글꼴 이름>]body { font-family: "맑은 고딕", 돋움, 굴림 }😏 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 선택하기도 하지만, 글꼴이 없을 경우를 대비해서 두 번째,

\*\*<span style="background-color: - 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것. (해당 요소의 너비가 100%)블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없음. <h1>, <div>, &l

top → right → bottm → left (시계방향)border-style : none | hidden | solid | dotted | dashed | double | groove | inset | outset | ridgenone : 테두리가 없음. 기본값.

두 박스 모델 사이의 여백은 margin, 한 박스 모델에서 테두리와 내용 사이의 여백은 padding 기본형 margin: <크기> | <백분율> | automargin-top, margin-right, margin-bottom, margin-left 사용

display : block | inline | inline-block | none block : 인라인 레벨 요소를 블록 레벨 요소로 만듦. inline : 블록 레벨 요소를 인라인 레벨 요소로 만듦. inline-block : 인라인 레벨 요소와 블록 레벨 요소의

수평 네비게이션을 만들 때 둘 다 메뉴를 가로로 표시해줌. 결과 화면은 똑같지만 약간의 차이가 있음. display: inline-block 은 가로로 배치하면서도 기본 margin과 padding을 가지고 있지만, float: left 로 배치하면 가로로 배치될 때

left : 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정right : 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정top : 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정bottom : 기준 위치와 요소 사이에 아래쪽으로

position: absolute 를 사용하려면 기준이 되는 요소에 position: relative 속성이 지정되어야 함. position: relative; 를 주석처리하였을 때 보여지는 화면position: relative; 를 적용하였을 때 보여지는 화면

링크를 삽입하는 ``태그와 href 속성

a 요소 중에서 href 속성이 있는 요소를 선택a\[href] { ... } a 요소 중에서 target 속성값이 '\_blank'인 것만 선택a\[target = \_blank] { ... } class 값 중에 button 이 있는 요소\[class ~= butt

텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시됨. 이 때 밑줄을 없애거나 색상을 바꿀 때 사용.웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용. 한 번 이상 방문한 텍스트 링크는 보라색이 기본값임. 웹 요소의 링크나 이미지 등을 활성화했을 때, 즉

스마트폰, 태블릿, 스마트TV 등 브라우저 환경이 다양하게 바뀌는데 기존 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 표시할 수 있도록 해줌. 뷰포트(viewport)란, 스마트폰 화면에서 실제 내용이 표시되는 영역. 뷰포트를 지정하면 접속한 기기의

그리드 레이아웃(grid layout)이란, 웹 사이트를 여러 개의 컬럼(column)으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것① 플렉스 컨테이너(부모박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소② 플렉스 항목(자식박스)

플렉스 박스 레이아웃에서는 플렉스 항목을 배치할 때 가로나 세로 중에서 하나를 주축으로 정해 놓고 배치함. 반면, CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용함. 그래서 플렉스 항목은 1차원이고 CSS 그리드 레이아웃은 2차원이라고 함

기본형 transform: 함수웹 요소를 x축으로 50px, y축으로 100px 이동하는 클랙스 선택자 .photo 정의2차원 변형 은 웹 요소를 평면에서 변형. x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커짐. 3차원 변형 은 x축과 y축에

트랜지션(transition) 은 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것을 말함. 트랜지션은 마이크로소프트 엣지와 인터넷 익스플로러 10이상에서 지원되며, 대부분의 최신 브라우저에서는 모두 지원됨. tra

product-result.htmlcss/product-result.css