일상

뷰포트 설정...width=device-width : 사용자가 접속하는 기기(디바이스)의 크기에 맞춰 뷰포트의 너비를 조종해준다.width=device-height : 사용자가 접속하는 기기(디바이스)의 크기에 맞춰 뷰포트의 높이를 조종해준다.inital-scale : 기본 스케일의 초기 배율. 1.0이 기본, 2.0이면 2배 확대, 0.5는 1/2로 축소user-scalable : yes는 사용자가 화면 확대/축소 가능, no는 불가능. 기본값은 nominimum-scale : 사용자가 축소할 수 있는 최소 축소값. 기본값은 0.25maximum-scale : 사용자가 확대할 수 있는 최대 확대값. 기본값은 5.0 가변 그리드: css에서 width를 %로 설정하여 웹페이지에서 화면의 크기가 달라짐에 ..

STUDY/HTML 2025. 5. 16. 10:15

태그 선택자: 태그에서 사용된 태그를 이용해 style 적용태그 선택자를 사용하면 해당 html 모든 태그에 적용이된다. 아이디 선택자: 태그안에서 요소를 사용할 때 id 속성을 설정하고 안녕 위 코드의 태그 내용은 "main"이라는 이름을 가진 아이디 하위에 태그를 선택자로 지정해 스타일을 적용한 것이다. 그룹 선택자, 를 이용해 두 개 이상의 선택자를 한 번에 스타일 적용이 가능하다.h2, #main h3 { color:blue; }

STUDY/HTML 2025. 5. 14. 18:40

마진(margin) - 경계선(border) - 패딩(padding) - html 요소margin: 60px;border: 경계선종류 선의굵기px 선의색상;padding: 60px; 세 속성 모두 top, bottom, left, right 속성을 각각 설정 할 수 있다.border-top: solid 1px red;border-bottom: double 1px green;border-left: solid 1px blue;border-right: solid 1px pink; margin마진 초기화 -> * (모든요소) 마진을 0 으로 설정 마진(margin), 패딩{padding) 속성margin:20px;margin:10px 20px 30px 40px;margin: 20px 10px; 속성을 따로 하지..

STUDY/HTML 2025. 5. 14. 17:53

CSS 기본 구조css 는 기본적으로 head 태그 안에 안녕하세요 CSS 의 속성 글자 색상 : colorcolor:색상이름;색상 이름 ( red, green, pink 등) 을 입력해도 되고 색상 코드(#ffffff) 를 입력해도 됨 글자 크기 변경 : font-sizefont-size:숫자px;기본 : 16px 글꼴 설정 : font-familyfont-femily:'글꼴 이름';글꼴 이름은 ' ' (작은 따옴표) 안에 적으며, '돋움', '굴림', 맑은고딕', '바탕' 등 사용 가능한 글꼴 이름을 적용하면 됨. 글자 스타일 설정 : font-weightfont-weight:bold;normal : 기본 글자 (, 태그처럼 기본 설정이 두꺼운 글씨를 기본 두께로 바꾸는데 사용)bold : 글..

STUDY/HTML 2025. 5. 14. 17:29

typetext : 일반 텍스트 입력 password : 비밀번호로 텍스트로 표기되지 않고 입력 radio : 동그란 선택버튼 (중복선택불가) checkbox : 네모난 선택버튼 (중복선택 가능) checked : 기본적으로 체크 되어있는 값 submit : 저장하고 다른곳으로 값을 보냄 button : 단순한 버튼 reset : 다시쓰기 file : 파일을 선택할 수 있는 속성 속성 value : 미리 입력된 값autofocus : 입력창을 클릭하지 않아도 자동으로 포커싱 되어있게 만들어주는 속성readonly : 값을 입력할 수 없다.disabled : 비활성화placeholder : 입력값 힌트 (기본적으로 회색으로 표기) 선택박스 textarea : 긴 글 텍스트 입력cols : 가로 너비 (가..

STUDY/HTML 2025. 4. 30. 12:02

'sub'로 이동 티스토리 사이트로 이동 -> 글씨를 클릭하면 작업중인 다른 경로, 절대경로 모두 이동 가능-> target="_blank" : 새로운 창을 열어서 경로를 띄워주는 속성 -> 이미지를 클릭하면 'sub2' 파일로 경로를 이동하는 코드

STUDY/HTML 2025. 4. 25. 16:24

순서가 없는 리스트 , 첫번째 리스트 두번째 리스트 세번째 리스트 결과첫번째 리스트두번째 리스트세번째 리스트 순서가 있는 리스트 , 첫번째 순서 두번째 순서 세번째 순서 결과 :1. 첫번째 순서2. 두번째 순서3. 세번째 순서 정의 리스트 , , 첫번째 정의할 개념 첫번째 정의하는 설명 두번째 정의할 개념 두번째 정의하는 설명 결과:첫번째 정의할 개념 첫번째 정의하는 설명두번째 정의할 개념 두번째 정의하는 설명

STUDY/HTML 2025. 4. 25. 16:14

상대경로-> 이미지가 현재 작업중인 html파일과 같은 폴더 안에 있을 때 -> ./ : 현재 작업중인 html 파일이 들어있는 폴더 안에-> img/ : 'img'폴더 안에 이미지가 있을 때 -> ./ : 현재 작업중인 html 파일이 들어있는 폴더 안에-> img/ : 'img'폴더 안에-> img2/ : 'img2'폴더 안에 이미지가 있을 때-> ../ : 현제 작업중이 html 파일이 들어있는 폴더의 이전 폴더 안에 이미지가 있을 때 절대경로 -> 현재 작업중인 기기의 C드라이브 안에서 파일경로를 가져온 경우--> 파일 경로는 실제 파일의 속성에서 가져올 수 있다. -> 도메인 주소 안의 파일 안에서 이미지 파일을 가져온 경우

STUDY/HTML 2025. 4. 25. 16:02