본문 바로가기

전체 글105

Box Model | border... | Box-Sizing 모든 HTML 요소는 웹페이지에서 일정 공간을 차지한다. 이러한 공간을 css에서는 박스 모델 (Box Model)로 정의한다. 구성요소 Content : 텍스트나 이미지가 들어가는 HTML 요소의 실질적인 내용 Padding : Content와 Border 사이의 영역으로, 안쪽 여백을 말한다. Border : Content를 감싸는 테두리 Margin : 테두리와 이웃하는 요소 사이의 간격. 바깥 여백 모든 HTML 요소의 Box Model의 구성은 동일하며, 웹 브라우저 > 개발자 도구 > Computed 탭에서 박스모델을 확인할 수 있다. Box Model Css 속성 Content width : 가로 너비를 지정할 수 있다. height : 세로 너비를 지정할 수 있다. width : 200px.. 2024. 1. 23.
Table (표) 관련 속성 태그에 border 속성을 활용해서 테두리를 그린다. table { border : 1px solid #222; border-collapse : collapse ; } 📌 border-collapse : collapse ; 속성을 사용해서 중복된 테두리를 하나로 만든다. DOCTYPE html> Table Tag #movies { border-collapse: collapse; width: 100%; } #movies td, #movies th { border: 1px solid #181818; padding: 8px; } #movies th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: green; color.. 2024. 1. 23.
CSS 폰트 글꼴 관련 속성 | 웹폰트 | 단위 | 색상키워드 표기법 | 그 외 속성 글꼴 관련 속성 font-family : 글꼴 종류를 지정한다. 기본적으로 웹브라우저 기본값 font-size : 글자 크기를 지정한다. font-style : 글자를 이텔릭체로 표시 여부를 정한다. font-weight : 글자 굵기를 정한다. font-variant : 소문자를 대문자로 바꾸는 속성 웹폰트 사용자의 컴퓨터에 설치된 폰트와 관계없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드 하여 화면에 표시해주는 웹 전용 폰트 구글 웹 폰트는 또는 @import 문을 사용해서 웹 폰트를 적용할 수 있다. 단위 px : 픽셀단위 rem : 루트 요소의 글꼴 크기 기준 n배 em : 자신 요소의 글꼴 크기 기준 n배 vw : viewport 너비의 n% vh : viewport 높이의 n% 색상 키.. 2024. 1. 23.
Selector (선택자) | 기본 선택자 | 그룹 선택자 | 결합자 전체선택자 : 보통 브라우저가 가지고 있는 기본 스타일을 초기화할 때 주로 사용한다. * { margin: 0; padding: 0; } Type 선택자 /* Type 선택자 */ h2 { color: green; } p { color: gray; font-weight: 400; tex Calss 선택자 온점 (.) 입력 후 Class 이름을 입력한다. 이름이 겹쳐도 상관없다. /* Class 선택자 */ .red--text { color: red; } .blue--text { color: blue; } ID 선택자 (#) 입력후 id 이름을 입력한다. 고유해야 한다. /* ID 선택자 >> 고유해야 한다. class 처럼 겹치면 안된다. */ #title { font-size: 40; color: da.. 2024. 1. 23.
CSS란 무엇인가? | 내부 외부 스타일 | 출처 적용 우선순위 CSS Cascading Style Sheets : 웹 페이지에서 사용하는 스타일 시트 언어 h1 { color : blue; } 선택자 : 꾸미고 싶은 요소, 태그를 말한다. 속성명 속성값 CSS를 배운다는 것은 속성명의 종류를 알아간다는 것이다. DOCTYPE html> CSS .green--text { color: green; } .text-decoration-none { text-decoration: none; } #dark { background-color: black; color: white; } .yellow { color: yellow; } 제목 안녕하세요 CSS 공부하고 있습니다. 네이버 이름: 김철수 사과 바나나 토마토 오이 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만.. 2024. 1. 23.
Head 태그 안에 배치할 수 있는 요소 head 안에 배치할 수 있는 요소 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. 텍스트만 포함될 수 있으며 태그를 포함하더라도 무시한다. Naver 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정한다. 문서에는 하나의 요소만 존재할 수 있다. 상대경로의 기준을 변경한다. 현재 문서와 외부 리소스의 관계를 명시한다. 는 스타일 시트를 연결할 때 제일 많이 사용한다. 사이트 아이콘 (파비콘 및 홈화면 아이콘) 연결 등으로 쓰인다. 기타 참고 짐코딩 2024. 1. 22.
Form 태그 Form : 사용자의 정보를 입력받을 수 있게 만들어 놓은 형식 HTML Form : HTML에서 Form은 웹에서 사용자의 정보를 입력받기 위해서 사용한다. 예를들어 로그인, 회원가입, 게시판 글쓰기 등에서 사용자의 데이터를 입력받는다. 이때 입력받은 데이터들의 묶음을 폼(Form), 그리고 데이터를 폼 데이터 (Form Data) 또는 필드 (Field) 라고 한다. 요소는 정보를 제출하기 위하여 어디서부터 어디까지가 양식인 지정하는 역할을 한다. 이름 : 이메일 : 속성 - 서버측에 값을 보낼 때 사용한다. action : 양식데이터를 처리할 서버 프로그램 URL method : 양식을 제출할 때 사용하는 HTTP 메서드 post : 양식 데이터 요청 본문으로 전송한다. (대부분 post mehod.. 2024. 1. 22.
이미지 & 멀티미디어 | 오디오, 비디오, 하이퍼링크 태그 태그는 HTML 문서에 이미지를 삽입한다. src 속성을 통해 경로를 설정해주는 것은 필수 alt 속성은 이미지에 대한 설명 : 웹 접근성이 향상된다. 스크린리더가 alt 값을 읽어 사용자에게 이미지를 설명한다. 또한 네트워크 오류, 컨텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에 속성값이 대신 보여진다. height : 픽셀 단위의 이미지 높이 (단위 없는 정수) width : 픽셀 단위의 이미지 너비 (단위 없는 정수) DOCTYPE html> Image_Media 이미지 태그 절대경로 vs 상대경로 절대경로 : 리소스(이미지)의 절대경로는 말 그대로 절대적인 고유한 경로를 지정하는 것. 웹 이미지 절대경로 ex) http://www.naver.com/apple.png >>> http 프.. 2024. 1. 22.

티스토리툴바