개발 LOG

레이아웃 속성 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 문서 내부에다 작성해 사용하는 내부 스타일 시트..