Dev Note

Chapter 5는 flex 요소에 대해 집중적으로 다루는 장이다. 우선 flex를 사용하기 위해 필요한 속성과 속성값을 정리해보겠습니다. 부모 요소에 flex 적용하기 속성명 속성값 설명 display flex 자신은 블록 속성을 유지하면서 자식 요소에 flex 환경 설정 inline-flex 자신을 인라인 속성으로 변경하면서 자식 요소에 flex 환경 설정 flex-direction row flex의 기본축을 가로로 지정한다. column flex의 기본축을 세로로 지정한다. row-reverse 자식 요소 콘텐츠를 가로 역순으로 정렬한다. column-reverse 자식 요소 콘텐츠를 세로 역순으로 정렬한다. flex-wrap nowrap 자식 요소의 줄 바꿈을 하지 않는다. wrap 자식 요소의 ..

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 파일에서 기호 " * ..

스터디를 위한 책 정리~ 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 이렇게 기본 구조로 자동완성 된다.