특성 선택자(CSS Attribute Selectors), 결합 선택자(CSS Combinators) 1. 특성 선택자(Attribute Selectors) 속성 선택자라고도 부른다. 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택하는 선택자이며, 대괄호로 묶는 것이 특성 선택자의 기본 형태이다. 구분 특성 선택자 내용 [속성] [class]{ background-color: tomato; } [attribute] 선택자: ① 특정 속성을 가진 요소를 선택한다. 즉 클래스 라는 속성이 있으면 어떤 속성값을 가지더라도 요소를 선택. a[target]{background-color:yellow;} target ① 속성이 있는 모든 요소를 선택 [속성="값"] [class="item"]{ backgrou..

CSS 선택자(Selector) 선택자란: 어떤 요소에 style을 적용할 것인가, 스타일을 적용할 요소에 대한 정보. css 기본 문법, 즉 선택자{ 속성명: 속성값; }, 즉 중괄호 안에 그 정보를 표시한다. 선택자의 종류 기본 선택자: 단순 선택자(simple selectors = 이름, 아이디, 클래스 기반) 그룹 선택자 특성 선택자 결합 선택자 의사 클래스 의사 요소 1. 기본 선택자 1) 전체 선택자(universal selector) 전체 선택자는 html 웹 문서를 구성하고 있는 모든 요소를 선택한다. 기호 애스터리스크(* 기호)는 css에서 문서 안의 모든 요소를 지시하는 css 기호이다. * { text-align: center; color: green; } 2) 태그 선택자(eleme..

1. 블록 요소(Block-level Elements)와 인라인 요소(Inline Elements) 모든 HTML 요소는 디스플레이 값을 갖는다. 디스플레이 값에는 블록 레벨 요소와 인라인 레벨 요소가 있다. 1-1. 블록 레벨 요소(Block-level Elements)와 인라인 요소(Inline Elements)의 차이 구분 블록 레벨 요소 인라인 요소 사용가능한 너비(width) div, p 등: 자기가 속한 영역의 너비를 모두 차지하여 블록을 만든다. 사용가능한 최대 너비(full width available)를 가진다. span, a 등 : 자기에게 필요한 만큼만 공간만 차지한다. 새 줄 시작 언제나 새 줄에서 시작한다 새 줄에서 시작하지 않는다. 상단 하단 여백 상단 및 하단 여백(top an..

background background는 콘텐츠의 배경을 정의한다. 색상, 이미지, 반복 등 하위 속성을 정의할 수 있으며 단축 속성을 사용할 수 있다. background의 하위 속성 background-color : 배경 색을 정의한다. background-image : 배경 이미지를 정의한다. background-repeat : 배경 이미지의 반복 방법을 정의한다 background-position : 배경 이미지의 초기 위치를 정의 background-size : 배경 이미지의 크기를 정의 1. background-color background-color 속성의 속성값 지정 방법은 color 속성의 속성값 지정방법과 똑같다. 색상 네임으로 색상을 정의할 수도 있고 RGB 색상 코드, 16진수 헥사..

box-sizing box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 정의한다. box-sizing 속성값 속성값으로는 content-box와 border-box 두 가지가 있다. 1. content-box 기본값(디폴트)이며 콘텐츠 영역만 너비와 높이에 포함한다. 요소의 실제 너비(actual width of element)= 콘텐츠의 width + padding + border 요소의 실제 높이(actual height of element)= 콘텐츠의 height + padding + border (1) 아래 div1과 div2는 컨텐츠 크기가 똑같다. 다만 패딩의 크기가 다를 뿐이다. (2) div1의 경우 컨텐츠의 크기는 300*100픽셀이고 실제 크기는 320*120픽셀이다. 실제..

1. margin, padding 하위 속성 margin과 padding에 top, right, bottom, left 등을 붙여 하위 속성을 만들 수 있다. 이것은 마진과 패딩에 동일한 방법으로 적용된다. 1) margin의 하위 속성 margin-top margin-right margin-bottom margin-left 아래 (그림 1)처럼 위, 우측, 아래, 좌측에 속성값을 주고 구글 크롬 개발자 도구로 출력하면 그 아래 (그림 2)와 같다. 아래 (그림 2)를 보면 패딩이 상, 우, 하, 좌측의 패딩이 20픽셀, 30픽셀, 40픽셀, 50픽셀로 지정되었다. 2) padding의 하위 속성 padding-top padding-right padding-bottom padding-left paddin..

css 박스 모델(Box-Model) 1 - margin, padding, border, content 박스(Box)란: 요소가 차지하고 있는 사각형의 영역 브라우저가 요소를 렌더링하는 시점에 각각의 요소들은 각각 사각형 형태의 영역을 차지하고 있다. 박스는 4개의 영역으로 구성되는데, margin, padding, border, content이다. css는 이 박스들의 크기, 위치, 속성들에 대해 스타일을 정의할 수 있다. 위 그림에서 바깥쪽 여백이 margin이고, 안쪽 여백이 padding이다. 테두리는 border 속성을 가짐으로써 두께, 모양, 색깔 등을 정의할 수 있다. 콘텐츠나 언제나 테두리(border)로 감싸져 있다. 콘텐츠 영역(span은 제외)은 width, height(너비, 높이)..

css 포지션 - static과 fixed와 sticky 차이점 지난 글 position 2편 2021.12.05 - CSS position, relative와 absolute 차이 position: static; ‘static’은 ‘고정적인’이라는 뜻이지만, css - position에서는 ‘원래 위치’란 뜻이다. 원래 위치에서 이탈하지 않고, 문서의 흐름을 그대로 따른다는 의미이다. static은 기본값(디폴트*, default)이다. static: 고정적인 fixed: 고정된 sticky: 달라붙는 static은 default값이며, * 디폴트(default, 기본값)이란 사용자의 개입 없이 자동으로 할당되는 설정 값이다. position의 속성값 static은 항상 페이지의 정상적인 흐름으로 배치..

CSS의 position 속성 중 relative와 absolute는 웹 디자인에서 중요한 역할을 하며, 그 차이를 정확히 아는 것이 중요합니다.CSS Position 속성이란?CSS에서 position 속성은 요소의 위치를 정의하는 데 사용됩니다. 웹 페이지의 레이아웃을 구성할 때 요소가 어디에 배치되는지 제어하는 중요한 역할을 합니다.relative와 absolute는 가장 많이 사용되는 두 가지 위치 속성입니다. 이 둘은 겉보기에 비슷해 보일 수 있지만, 동작 방식은 완전히 다릅니다.Position: relative와 absolute의 기본 개념1. Position: relativerelative는 요소를 자신의 원래 위치를 기준으로 이동시킵니다.특징:요소의 기본 위치를 유지하면서, 추가적으로 to..

HTML 이미지 태그 사용 방법 1. HTML 태그와 필수 속성, src, alt 이미지 태그는 HTML 문서의 외관을 꾸미는 용도로 사용하는 태그이다. 태그는 웹 페이지에 이미지를 삽입하기 위해 사용된다. 그러나 이미는 웹 페이지에 삽입되지 않는다. 이미지는 웹 페이지에 링크될 뿐이다. 링크는 반드시 경로를 수반한다. 그리고 img태그에는 경로(src), 즉 속성 src는 필수 속성이다. 통사론 위 태그에서 속성 src는 소스(source)의 약자이며 이미지의 위치(경로)를 지정한다. 다시 말하면 이미지의 위치(경로)를 링크하는 것이다. 2. img 태그는 빈 태그이다. 태그는 속성만 포함한다. 속성만 포함한다는 말은 닫는 ..