코드 여행 일기

box-sizing box-sizing 속성은 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정한다. ⇒ 너비와 높이가 같더라도, box-sizing 속성 값에 따라 크기가 달라질 수 있다. 위 글은 유튜브 유노코딩 영상을 정리하여 쓴 글 입니다.

padding 과 margin 다양한 경우의 수 여백은 상하좌우 네 개의 면에 존재하는 영역이다. 작성자는 각 면에 개별적으로 두께를 정의할 수 있다 이를 위해 다음 두 가지 방법을 사용한다. 하위 속성 정의하기 여러 값을 한 번에 정의하기 하위 속성 정의하기 상하좌우 여백을 정의할 수 있는 개별 속성들이 있다 ⇒ margin 에도 동일한 접미사를 붙여 개별 정의할 수 있다. ex)margin-top, margin-left 초록 padding 주황 margin 여러 값을 한 번에 정의하기 padding 과 margin은 네 면의 여백에 대한 단축 속성이다. 위 글은 유튜브 유노코딩 영상을 정리하여 쓴 글 입니다.

박스모델 (Box-Model) 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 ‘박스’ 라 표현하며, CSS는 박스의 크기, 위치, 속성 (색, 배경, 테두리 모양 등)을 결정할 수 있다. 하나의 박스는 다음 4개의 영역으로 구성된다. 콘텐츠 영역 안쪽 여백 경계선 (테두리) 바깥쪽 여백 박스 각 영역의 크기 콘텐츠 영역 : width, height 안쪽 여백 : padding 경계선 (테두리) : margin 바깥쪽 여백 : border-width 요소의 콘텐츠 확인 * display: inline-block; 코드 사용해야 적용됨 위 글은 유튜브 유노코딩 영상을 정리하여 쓴 글 입니다.

블록 레벨 요소 자기가 속한 영역의 너비를 모두 차지하는 블록을 형성한다 (ex. div, p ,h1등) 인라인 요소 자기에게 필요한 만큼의 공간만 차지한다. (ex. span, a 등) display 속성 display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다. border 속성 border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다. border 속성에는 속성 값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데, 이러한 속성을 ‘단축속성’ 이라 한다. h1 입니다. span 입니다. 위 글은 유튜브 유노코딩 영상을 정리하여 쓴 글 입니다.

텍스트 꾸미기 속성 font-family 요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴 명을 속성 값으로 지정한다. 여러 개의 글꼴을 연달아 기입하여 우선 순위를 지정 할 수 있다. 제목 입니다. 예문 입니다. ⇒ serif 가 우선 지정하되, 지원되지 않을 경우 monospace를 지정한다. font-size 글자 크기를 정의한다. 수치와 단위를 지정해 글자의 크기를 정의할 수 있다. 단위 의미 px 모니터 상의 화서 하나 크기에 대응하는 절대적의 크기 rem 태그의 font-size에 대응하는 상대적인 크기 em 부모 태그(상위태그)의 font-size에 대응하는 상대적인 크기 제목 입니다. 예문 입니다. text-align 블록 내에서 텍스트의 정렬 방식을 정의한다. 미리 정의된 키워드 값을 지정..

선택자의 종류 기본 선택자 그룹 선택자 [ 이번엔 위 2가지만 다룰 예정 ] 특성 선택자 결합 선택자 의사 클래스 의사 요소 [ 나머진 다음 시간에 ] 기본 선택자 1. 전체 선택자 모든 요소를 선택한다. *(애스터리스크)는 ‘문서 내의 모든 요소’ 를 의미하는 기호이다. 제목 입니다. 안녕하세요 예문 111 입니다. 안녕하세요 예문 222 입니다. 안녕하세요 예문 333 입니다. ⇒ 문서 내 모든 요소의 글자 색을 파란 색으로 지정한다. 2. 태그 선택자 주어진 이름을 가진 요소를 선택한다. ‘유형 선택자’ 라고도 한다. 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다. 제목 입니다. 안녕하세요 예문 111 입니다. 안녕하세요 예문 222 입니다. 안녕하세요 예문 333 입니다. ..

CSS = Cascading Style sheets Cascading : 계단식 Style : 멋을 내다 sheets : (종이) 한 장 계단 식으로 스타일을 정의하는 문서 HTML 문서를 꾸며주는 언어 HTML 파일에 CSS 코드 적용 방법 1. 인라인 스타일 태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의 하는 방식 안녕하세요 예문 입니다. 2. 스타일 태그 HTML 문서에 태그를 추가하여 그 안에 CSS 코드를 작성할수 있다 안녕하세요 예문 입니다. 안녕하세요 예문 2222 입니다. 안에 들어간 모든 코드에 적용 이 된다 3. 문서 간의 연결 확장자가 *.CSS 인 스타일 시트 파일 생성해 그 안에 CSS 코드를 작성하고, HTML 문서에 이를 연결하는 방식. 이때는 태그를 사..