HTML/DAY 29 _ 23.10.04 (12) 썸네일형 리스트형 Box Model3 안녕 나는 박스1... 글자강조하고 싶을때 [15] 하이 나는 박스2 ## 결과 HTML 삽입 미리보기할 수 없는 소스 Box Model2 -> box2의 크기를 키우면 box1도 커지겠지 ## 결과 HTML 삽입 미리보기할 수 없는 소스 Selector2 안녀어어엉 안녀어어엉 안녀어어엉 안녀어어엉 안녀어어엉 -> 콤마없이 쓰면 두개의 클래스를 적용시킬 수 있다! ## 결과 HTML 삽입 미리보기할 수 없는 소스 CSS Basic 안녕 나는 div얌. abc라는 id를 가지고있지. ## 결과 HTML 삽입 미리보기할 수 없는 소스 Box Model CSS 박스 모델(CSS Box Model): 웹 페이지에서 요소의 크기와 레이아웃을 정의하는 데 사용되는 중요한 개념입니다. 모든 HTML 요소는 사각형 박스로 간주되며, 이 박스는 여러 구성 요소로 나누어집니다. 1. 콘텐츠 영역(Content Area): 요소의 실제 내용이 표시되는 부분입니다. 텍스트, 이미지, 동영상 등의 콘텐츠가 이 영역에 표시됩니다. 2. 패딩(Padding): 콘텐츠 영역과 경계(Border) 사이의 공간입니다. 패딩은 요소의 내부 여백을 제어하며, 내용과 경계 사이의 거리를 조절합니다. CSS 속성으로 padding을 사용하여 설정할 수 있습니다. 3. 테두리(Border): 콘텐츠와 패딩을 둘러싸는 선입니다. 테두리는 요소의 외부 경계를 정의하며, 요소를 감싸는 역할을 .. Selector ## 주요 선택자 유형 1. 요소 선택자 (Element Selector): HTML 요소의 이름을 사용하여 해당 요소를 선택합니다. 예를 들어, p는 모든 (문단) 요소를 선택합니다. div는 모든 (디브) 요소를 선택합니다. 2. 클래스 선택자 (Class Selector): ★ ★ ★ CSS 클래스를 사용하여 특정 클래스를 가진 요소를 선택합니다. 예를 들어, .button은 class="button"을 가진 모든 요소를 선택합니다. 3. ID 선택자 (ID Selector): ★ ★ ★ 고유한 ID를 사용하여 해당 ID를 가진 요소를 선택합니다. 예를 들어, #header는 id="header"를 가진 요소를 선택합니다. 4. 자식 선택자 (Child Selector): 특정 요소의 자식 요소를 .. 알아두면 좋을 Tag들 추가! 적당히 알면 좋을 태그들.. table table의 자식들 : tr - 행, td - 열 / border : 테두리를 넣을 수 있음. 사용X 번호 제목 작성자 작성일 1 제목을쓰고 한조 23.10.04이런식 2 제목제목 작성자작성자 작성일일이링링ㄹ ul 리스트 내용1 리스트 내용2 리스트 내용3 리스트 내용4 video -> source src="./aaaa.mp4" 이런식으로... 문자관련 태그들 i : 기울어져라 b : bold, 두꺼워져라 u : 밑줄 s : strike, 가운데 줄 ## 결과 HTML 삽입 미리보기할 수 없는 소스 중요한 Tag들 h1을 레이아웃 태그로 사용하겠어. div div : 레이아웃의 핵심!! -> 주로 레이아웃과 스타일을 적용하는 데 사용됩니다. -> 블록 레벨 요소이므로 디폴트로 수직으로 쌓이며, 부모 요소의 너비를 가득 채우려는 경향이 있습니다. -> 예를 들어, 웹 페이지의 섹션을 그룹화하거나 스타일을 적용하려는 경우에 사용할 수 있습니다. span span : 특정 글자 디자인할 때. -> 텍스트의 작은 부분을 감싸고 스타일을 적용하기 위해 사용됩니다. -> 인라인 요소로, 텍스트 내에서 다른 인라인 요소와 함께 사용될 수 있습니다. -> 주로 텍스트의 일부분에 스타일을 적용하거나 JavaScript를 통해 특정 부분을 조작하는 데 사용됩니다. ★ a 태그 : 링크 이동 ★ https로 시작하면 완.벽.한 절대경.. 이전 1 2 다음
