본문 바로가기

Study53

css box model 박스 모델(Box Model)html 문서의 레이아웃은 css 기본 박스 모델에 따라 사각형 박스로 표현된다.css를 통해 박스의 크기, 위치, 속성 등을 지정할 수 있다.하나의 박스는 네 개의 영역(콘텐트, 패딩, 보더, 마진)으로 이루어진다.(1) 콘텐트 (Content)문서에 포함된 텍스트나 이미지, 비디오 등의 경계가 감싼 영역div의 width와 height는 콘텐트 너비와 높이에 해당 (2) 안쪽 여백 (Padding)패딩 값을 이용하여 콘텐트와 보더 사이 간격을 지정할 수 있음Box Model 내부로 취급하기 때문에 배경색, 배경 이미지 등에 영향을 받음/* CSS */div { width: 200px; height: auto; background-color: paleviol.. 2024. 11. 3.
CSS와 선택자, 텍스트 및 배경 스타일 1. CSS란?웹 페이지의 특정 요소 또는 그룹에 적용할 스타일을 지정하는 규칙을 정의하는 언어 즉, 웹 페이지를 디자인하는 역할을 한다.html 파일 내에서 style 속성을 통해 사용할 수도 있지만 주로 작성한 코드를 css 파일로 저장하고 html head 영역에 link 태그로 연결하여 사용한다. 안녕하세요 안녕하세요 안녕하세요  2. CSS 선택자전체 선택자 ( * )문서 내의 모든 요소에 스타일을 적용세부 항목이 선택된 선택자는 전체 선택자에서 제외color 속성은 상속이 되나 일반적으로 전체 선택자가 우선/* CSS */h2 { color: deeppink; }* { color: deepskyblue; }p { color: gold; } 선택자 스타일을 모든 요소에 적용 .. 2024. 11. 3.
html 테이블, 아이프레임, 폼태그, 디스플레이 테이블(table) : 테이블을 만들어주는 태그 : 행을 만들어주는 태그 : 셀을 만들어주는 태그 :  텍스트가 가운데 정렬이 되도록 셀을 만들어주는 태그테이블 속성colspan="n": 가로 n개의 셀 병합rowspan="n": 세로 n개의 셀 병합 html 테이블은 사용하지 않는 것을 권장 대신 css를 사용함화면에 테이블이 잘 보이게 적용하기 위에 css style언어 사용 /* CSS */ 첫 번째 셀 첫 번째 셀 두 번째 셀 세 번째 셀 네 번째 셀 첫 번째 셀 두 번째 셀 세 번째 셀 네 번째 셀.. 2024. 11. 1.
html 목록 태그, 이미지 태그, 하이퍼링크 목록태그순서가 없는 태그  순서가 있는 태그  사용자 정의 태그  예시 적용 코드li*4 --> 잠만보 장쪼만 장장군 이루미li*3 --> 이초코 이깜시 이또순dt+dd*3 --> 오늘 할 일 블로그 정리하기 과제 제출하기 복습하기   이미지태그src 속성에는 화면에 나타내고 싶은 이미지의 경로를, alt 속성에는 이미지가 나타나지 않았을 때 나오는 텍스트를 넣어준다.  절대 경로이미지 파일이 가지고 있는 주소나 고유한 위치  상대 경로작성 중인 HTML 파일 기준에서의 이미지 경로 --> -->현재 HTML 파일과 동일한 디렉토리에 위치한 이미지의 경로는 "이미지명.png(jpg)" 만 작성 또는 현재 위치라는 의미의 ... 2024. 10. 31.
html 기본 태그 블록 태그 (block)태그를 감싸고 있는 부모 태그의 너비 만큼 전체 한 줄을 차지하는 태그, , , 등 인라인 태그 (inline)태그에 입력한 정보 영역만 차지하는 태그, , , 등   제목 태그~글씨 변경은 CSS로 다룰 수 있기 때문에 크기 기능보다는 검색 엔진에서 웹 사이트를 찾을 수 있는 키워드를 나타내는 용도로 사용한다.블록 태그이므로 태그가 끝나는 부분 다음에 텍스트를 작성하면 html 코드는 한 줄로 나타나 있지만, 화면에서는 텍스트가 제목 태그의 아래로 내려간다. 안녕하세요. 제목 태그 h1 여기에 쓰면 글자가 밑으로 내려가요 안녕하세요. 제목 태그 h2 안녕하세요. 제목 태그 h3 안녕하세요. 제목 태그 h4 안녕하세요. 제목 태그 h5 .. 2024. 10. 30.
html 기본 틀 실제 웹 페이지 화면엔 나오지 않지만 문서의 정보를 넣는 부분 정보를 넣는 태그, 태그 옆에는 부가적인 속성을 넣음charset: 문자셋 설정name="viewport" : 모바일 관련 기능, 가상의 브라우저 엔진을 조정하는 속성 설정content="width=device-width" : 디바이스의 화면 너비를 따르도록 해주는 속성 설정initial-scale=1.0 : 모바일에서의 확대, 축소 기능 수준을 설정 브라우저 상단 제목 표시줄에 노출 되는 영역 화면에 노출되는 내용을 담는 부분 2024. 10. 29.

티스토리툴바