1. 콤비네이터(Combinator)우리말로 결합자 라고 하는데, 콤비네이터는 셀렉터와 셀렉터 사이에 추가하여 새로운 선택을 만들어내는 연산자이다.이를 통해 좀 더 복잡하고 효율적인 선택이 가능하다. 브라우저는 요소를 선택할 때, 셀렉터의 가장 오른쪽부터 시작하여 왼쪽으로 이동하여 조건을 확인한다. 이는 성능 최적화를 위함인데, 불필요한 요소 검사를 줄일 수 있다. 1-1. 주요 콤비네이터 유형하위 콤비네이터 (Descendant Combinator)기호: (공백)예: div p설명: 모든 p 요소를 찾은 후, 그 중 div 하위에 있는 요소를 선택자식 콤비네이터 (Child Combinator)기호: >예: `ul > li설명: 모든 li 요소를 찾은 후, 그 중 직계 부모가 ul인 요소를 선택인접 형..

1. Block 레벨 요소한개의 독립된 덩어리로 자신의 콘텐츠 길이에 상관없이 화면의 가로 폭 전체를 차지하는 요소들을 말한다.화면의 가로 폭 전체를 차지하기 때문에 block level 요소들은 세로로 배치된다. 1-1. 대표적인 block level 요소, , , , ....유형G">단일 작성 문법멀티 작성 문법설명블록 요소G">display: blockdisplay: block flow기본적인 블록 요소플렉스 컨테이너G">display: flexdisplay: block flex블록 박스로 배치되며, 내부적으로 플렉스 레이아웃을 사용하여 자식 요소들을 배치그리드 컨테이너G">display: griddisplay: block grid블록 박스로 배치되며, 내부적으로 그리드 레이아웃을 사용하여 자식 요..

1. width: 100% 와 width: auto 의 차이점1.width: 100%의미 : width: 100% 는 요소의 내용(content)이 부모 요소의 가용 너비를 완전히 차지하도록 설정한다. 이때 가용 너비는 부모 요소의 패딩과 테두리(border)를 제외한 부분이다.1-1. 특징부모 요소의 패딩이나 테두리(border)가 있으면, 그만큼의 크기가 제외된다.자식 요소가 부모 요소의 가용 영역을 완전하게 채운다.반응형 디자인에서 종종 사용됨box-sizing의 속성에 따라 달라질 수도 있다.content-box : width는 콘텐츠 너비만 포함border-box : width는 패딩과 보더를 포함하여 전체 요소 너비를 지정2. width: auto의미: width: auto는 요소의 내용에 따..

위와 같은 이미지를 구현해보자. 위와 같이 간단하게 html 구조를 짜보자.  요소 안에 를 통해 style.css를 연결해주자. 그리고 title로 제목을 정해주자그리고 body 요소 안에는 시멘틱 태그인 article 태그로 작성해보자. article태그는 보통 기사나, 포스터 등을 할때 사용한다고 한다. 이번에는 text가 많으므로 article을 사용해보자.article 태그 안에 이미지를 연결해주고, alt의 속성을 통해 만약 이미지가 표시가 안되거나 로드가 되지 않았을 때 대신 표시할 대체 텍스트를 지정하는 것이다. 여기는 혼자서 하는거 이기에 그냥 빈 문자열로 놔둔다. 그리고 h1 태그를 해놓고 저 많은 텍스트는 어떤 것으로 담아야 할까? 라는 생각을 하게 되었다. 우리가 배웠던 것은 di..

간단하게 html의 구조와 css 스타일링에 대해서 실습해보았다.이번에 만들어 볼 페이지는 이러한 것이다.이는 사진 및 텍스트를 가운데 배치하고, 리스트는 클릭하면 다른 사이트로 이동하게 만드는 것이다.처음 구조를 이러한 식으로 잡는다그 이후 타이틀과 사진이 들어갈 Div 와 안에 텍스트를 적어보자. 이렇게 대략적인 위치를 잡아준다. div로 콘텐츠를 넣어줄 공간을 만들어주자. 그리고 중간에 ul>li*3 가 있는데, 이는 태그 안에 태그를 3개를 만들어주는 명령어이다. 그래서 위에 나온 리스트를 만들어준다.위의 예시처럼 사진을 넣어주고, 콘텐츠를 채워보자이러한 식으로 태그안에 rel 속성값을 넣어준다. 이는 이 문서가 어떤 형식인지를 정해주는 것이며, href는 Hypertext Reference..

1. HTMLHyper Text Markup Language의 약어로 웹페이지를 만들때 사용하는 언어이다. HTML은 프로그래밍 언어는 아니다. 웹페이지가 어떻게 구조화 되어있는지 정의하는 마크업 언어이다. 2. 하이퍼텍스트(Hyper Text)Hyper(초월한, 뛰어넘은)와 Text(문서)의 합성어로 기존의 문서는 책처럼 순차적으로 하나씩 접근하는 방식이었다면 하이퍼텍스트는 링크에 따라 다른 페이지로 이동하거나 동일 페이지 내 다른 위치로 이동하는 비 순차적 접근 방식이다. 3. 마크업 언어(Markup Language)태그 등을 이용하여 문서 혹은 데이터의 구조를 명기하는 언어이다.즉, 해당 문서, 데이터가 어떤 의미를 가졌는지 쉽게 알 수 있게 해준다. 마크업 언어는 정적인 언어이기 때문에 프로그래..