Dev Note

transform 속성 요소를 확대/축소, 회전, 비트는 등의 형태로 변형할 수 있는 속성이다. 속성명 속성값 설명 transform(2D) scale 선택한 요소의 크기를 확대/ 축소 현재 크기의 비율을 기준으로 1보다 크면 확대, 1보다 작으면 축소 skew 선택한 요소를 x축 y축으로 비틀어서 변형. 원하는 각도를 지정하여 기울기 조절 translate 현재 위치 기준에서 x축 또는 y축으로 이동 rotate 원하는 각도 지정하여 회전 transform(3D) rotateX, rotateY x축 또는 y축으로 회전 translateZ z축으로 입체감있게 이동시킴 perspective px 3D 효과가 적용된 요소가 입체감 있게 보이도록 부모 요소에 원근감 부여 transform-style prese..

웹 페이지의 배경 배경색 background-color 속성 속성명 속성값 설명 background-color 영문명 배경색을 영어 색상명으로 지정 rgb(0, 0, 0) 배경색을 RGB 표기법으로 지정 #000000 배경색을 16진수 표기법으로 지정 배경 이미지 속성명 속성값 설명 background-image url(이미지 경로) 배경 이미지 삽입 background-repeat repeat, repeat-x, repeat-y, no-repeat 배경 이미지 반복 background-position 가로축, 세로축 배경 이미지 위치 지정 background-size contain, cover 배경 이미지 크기 지정 background-attachment fixed 배경 이미지 고정 DOCTYPE ht..

[ 3장 CSS 기본 문법 빠르게 끝내기 ] HTML에 CSS 연결하기 에디터에서 외부 CSS 파일 입력하기 - 에디터는 visual studio code 사용 link:css 를 입력 후 enter를 누르면 css파일은 연결하는 자동 완성 구문이 나타난다. 태그의 href 속성에 경로를 넣어준다. 폴터 루트는 다음과 같이 구성하였다. css 파일을 열어 문자 인코딩 방식을 작성한다. 인코딩 : utf-8 CSS 문법 h1 : 선택자 color : 속성명 blue : 속성값 속성명과 속성값의 연결은 콜론( : ) 으로 나누고, 세미콜론( ; ) 으로 선언들을 구분한다. 전체 선택자 예제) See the Pen css1 by yejin (@geniest) on CodePen. CSS 파일에서 기호 " * ..

시맨틱 태그 웹 페이지를 만들 때 HTML5의 시맨틱 태그를 이용하여 영역을 구분하여 기본 구조를 정해야한다. 종류 설명 머리말 영역 링크 등의 메뉴 영역 동영상, 사진 등 다양한 멀티미디어를 담는 영역 웹 문서의 본문으로 콘텐츠를 담는 영역 본문과 연관성이 적은 외부 영역 특정 영역을 그룹화한다. 기사나 개별 콘텐츠를 담는 영역 꼬리말 영역 참고로 VSCode에서 ctrl + alt + f 를 누르면 코드들이 자동 정렬된다. 서식태그 block 요소와 inline 요소 블록 요소( Block element ) - 사용 가능한 최대의 가로너비 사용 ( default width 100% ) - 한 줄에 한개 배치 - 레이아웃 작업하기 용이 인라인 요소 ( Inline element ) - 필요한 만큼의 영..

스터디를 위한 책 정리~ Chater 01 웹 페이지 제작 준비하기. UI ( User Interface ) - 사용자 환경을 의미. - 사람들이 콘텐츠를 이용할 때 만나는 도구와 사용 환경을 의미한다. UX ( User Experience ) - 사용자 경험을 의미. 인터랙티브 UI/UX ( Interactive UI/UX )란? 사용자와 상호 작용하는 여러 모션과 동적인 콘텐츠를 사용하는 환경을 의미한다. HTML, CSS, Javascript 의 역할 HTML - 뼈대 CSS - 디자인 Javascript - 기능 부여 예제 html:5만 입력하고 enter를 누르면 DOCTYPE html> Document 이렇게 기본 구조로 자동완성 된다.