개발 LOG

지금까지 제작했던 웹페이지는 반응형으로 설계되지 않아, 특정 디스플레이에서만 제대로 보이는 한계가 있었다. 예를 들어, 16:9 비율의 FHD(1920x1080) 디스플레이를 기준으로 만든 웹페이지는 4:3이나 21:9 비율의 화면, 혹은 QHD, UHD, HD 등의 다른 해상도를 가진 디스플레이에서는 의도와 다르게 표시될 수 있다. 이러한 문제를 해결하기 위해서는 해상도나 화면 비율에 맞춰 크기를 자동으로 조절하는 반응형 웹 제작이 필수적이다!! 메타태그 문서에 대한 메타 데이터를 정의하는 태그로 보통 문자 인코딩, 페이지 설명, 키워드, 뷰포트 설정을위해 사용하는데 항상 문서의 head 부분에 들어간다는 특징이 있다. charset HTML문서의 문자 인코딩을 지정하는데 아마 기본적으로 인코딩 지정을..

그라디언트 그라디언트 - 점진적으로 색의 변화를 나타낼 수 있는 요소로 HTML 요소의 배경을 설정 할 수 있는 background 계열 CSS요소다.gradient 요소가 가질 수 있는 속성으로는 방향, 색상, 정지점 설정 등이 있다. 방향을 나타내는 속성 - 선형 그라디언트 : to top, to bottom 등 - 방사형 그라디언트 : circle at center, ellipse at top left 등 색상을 설정하는 속성- rgb 또는 rgba 로 설정 정지점을 설정하는 속성- radial-gradient (red 30%, blue 70%); radial-gradient: 방사형 그라디언트로 특정 축의 중심을 기준으로 바깥으로 색이 퍼져나가는 방식으로 표현된다..radial { displ..

Background와 Transition  Background- HTML 요소에 이미지나 색상 등을 넣는 속성으로 배경화면을 만드는데 주로 사용한다 background-color - background-color는 요소의 배경 색상을 설정하는 속성이다.- 색상은 일반적으로 색 이름, RGB, HEX 코드 등으로 지정할 수 있다.  background-image - background-image는 요소의 배경으로 이미지를 설정하는 속성이다.- 이미지 경로를 URL로 지정하여 사용한다.   background-position - background-position은 배경 이미지가 요소 내에서 어디에 위치할지 설정하는 속성이다.- 값은 left, center, right 또는 top, center, botto..

레이아웃 속성 position - 텍스트 이미지, 표 등 요소의 웹 문서에 배치할 때 사용하는 속성으로 레이아웃 구성에 큰 영향을 미친다- position은 static, relative, absolute, fixed 등의 옵션이 있다 static-  HTML의 기본값으로 그냥 흐름대로 배치시켜주는 속성이다- 그렇기 때문에 별도의 설정이 없으면 요소들의 배치는 static 설정으로 적용된다   relative - 요소를 일반적인 문서 흐름에 따라 배치하되, 자신의 static 위치를 기준으로 이동할 수 있다.- top, right, bottom, left 속성을 사용하여 위치를 조절할 수 있다- 다른 요소들의 레이아웃에 영향을 주지 않는다 이 div는 relative로 설정된 요소입니다.  absoult..

폰트 설정 Fontfont-weight- 폰트의 두께를 지정해주는 속성이다속성 값의미normal기본 글자 두께bold볼드처리bolder부모 요소보다 더 두껍게lighter부모 요소보다 더 얇게숫자지원하는 서체에 따라 100~900 사이의 두께 설정 div{font-weight: 600;} font-size- px, %, em, rem, vw,vh 등의 단위로 폰트의 크기를 설정한다- px은 픽셀단위, %는 부모 요소에 따라 상대적으로 변하는 단위- em은 부모 요소를 기준으로 크기가 변하는 상대적인 단위로 만약 부모 요소 div에 16px을 했다면 1em은 16px이 된다- rem은 루트요소 html style="font-size: 18px;">에 따라 변화하는 단위로 기본 HTML의 폰트 크기는 16p..

박스 모델 박스 모델- 텍스트나 이미지, 테이블 등의 요소를 배치했을 때 각각의 요소가 가지는 크기 속성- 웹 문서의 레이아웃을 정의하는데 깊은 관여를 한다- 뭔가 요소 간의 거리를 떨어뜨리거나 크기를 조절하고 싶으면 박스 모델의 속성을 조절하면 된다- 박스 모델은 Content, Padding, Border, Margin으로 이루어져 있다   Content- p태그, a태그, div, span 등 텍스트를 포함하거나 이미지 등의 파일을 포함하는 모든 HTML 요소의 알맹이를 의미한다- content를 중심으로 padding,margin,border가 둘러쌓여있는 형태로 이해하면 된다- 속성은 너비와 높이가 있는 width나 height의 value를 정하고 min,max를 통해 최솟값 최댓값을 정하기도..

선택자 (Selector)CSS3 선택자 (Selector)- 선택자는 코드 내 요소를 선별하고 CSS 속성을 적용하는 데 사용되는 표현식으로 몇가지 기본 선택자들이 존재한다.- 선택자는 전체선택자, 타입선택자, 클래스선택자, 아이디선택자, 속성선택자가 있고 가상 선택자가 존재한다 1. 전체선택자- 전체 선택자는 말 그대로 스타일을 HTML 코드 전역으로 적용하고자 할 때 사용할 수 있는 선택자이다.- 사용 방법은 간단하다. 코드 내부 *{속성 선언} 형태의 코드를  2. 타입선택자- 타입 선택자는 앞서 나왔던 인라인 스타일 시트와 유사한 방식으로 사용할 수 있다.- 다만 타입 선택자는 사용한 태그 이름을 그대로 사용  3.클래스선택자- 클래스 선택자는 type 선택자와 다르게 태그들에 클..

CSS 기본 사용법- CSS는 웹 문서에 폰트, 색상, 정렬 등 디자인 요소들을 적용하는데 사용하는 스타일 언어다- 어떤 HTML 태그에 스타일을 적용할지 정하는데 필요한 선택자(Selector)와 속성, 속성 값으로 구성된다- 대상을 정했다면 속성을 적고 콜론 뒤에 속성 값을 적고 세미콜론으로 스타일 적용을 마무리한다 p {color : blue;} CSS 사용 용법 *CSS의 용법은 크게 3가지가 있다*1. HTML 태그에다가 그대로 집어넣어 사용하는 인라인 (in-line) 방식 우선 인라인 방식은 태그 내부에 코드를 작성하면 되는데 이렇게 하면 일종의 지연 변수처럼 작동되기 때문에 해당 CSS 코드를 재활용 할 수 없다는 점이 있다.  2. HTML 문서 내부에다 작성해 사용하는 내부 스타일 시트..