Genie's Devlog

Chapter 06은 드디어 자바스크립트를 다룬다. 솔직히 css 너무 어려웠다 ㅠㅠ 물론 js도 너무 어렵다 ㅜㅜㅜㅜ Javascript 란? 간단하게 설명하자면 웹페이지에 생동감을 넣어주기 위해 만들어진 언어이다. 다양한 이벤트 (ex. 마우스 클릭) 로 어떠한 동작을 하도록 할 수 있다. html 파일에서 자바스크립트를 사용하는 방법은 크게 두 가지이다. 1. HTML 파일 내부에 자바스크립트 연결하기 이렇게 위의 비슷하게 img 태그에 onmouseover, onmouseout 속성을 적용하여 hover를 구현할 수 있다. 같은 요소에 이벤트 한꺼번에 연결하기 html item1 item2 item3 item4 js const list = document.querySelectorAll(".list..

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

시맨틱 태그 웹 페이지를 만들 때 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 이렇게 기본 구조로 자동완성 된다.