css

가상 요소 선택자 (인라인 글자요소) ABC::before 선택자 ABC 요소 내부 앞에 내용을 삽입 ABC::after 선택자 ABC 요소 내부 뒤에 내용을 삽입 content:"" 라는 속성은 항상 추가 해야한다 속성선택자 ATTR [ABC] 속성 ABC를 포함한 요소 선택 TTR=VALUE [ABC="XYZ"] 속성 ABC를 포함하고 값이 XYZ인 요소 선택 CSS 속성 모두 글자/문자 관련 속성들! (모든 글자/문자 속성은 아님 주의!) font-style : 글자 기울기 font-weight : 글자 두께 font-size : 글자 크기 line-height : 줄 높이 font-famliy : 폰트(서체) color : 글자 색상 text-align : 정렬 강제 상속 inherit; 부모요소..

편리함 HTML 1/2/3/4/5 엄격한 안전함 XHTML/HTML5 내용 이미지를 삽입하는 요소 (경로) 데이터 타입, 사용자에게 일반 텍스트를 입력받음 체크박스 타입으로 보여줌 input 빈태그 요소 글자와 상자 요소가 화면에 출력되는 특성 - 인라인요소: 글자를 만들기 위한 요소들 - 블록요소: 상자를 만들기 위한 요소들 인라인요소 태그: 수평으로 쌓임 띄어쓰기가 들어감 붙어쓰기하면 띄어쓰기가 없음 콘텐츠 크기만큼 자동으로 줄어듬 css 요소 width height margin :요소의 외부여백을 지정 padding: 요소의 내부여백을 지정 글자요소 안에는 상자요소를 넣을 수 없음 블록요소 요소 : 수직으로 쌓임 블록요소 안에 인라인요소,블록요소를 넣을 수 있음

https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io vs code를 사용하지 않고도 바로 확인할 수 있는 사이트 기본 크롬에는 브라우저 스타일이 적용되어 있는데 이걸 초기화하려면 이 링크를 안에 달아주면 된다 * css 링크 위에 달아줄 수 있도록 한다 Emmet 은 vs code 에서 태그를 자동으로 완성해주는 기능인데 ex ) img 을 누르면 이렇게 자동으로 만들어진다 codepen에서도..

! 자동생성 모든 태그 자동생성 tag 기본 영역 문서의 html 버전 지정 - 시작태그 -종료태그 - 문서의 전체범위 시작과 끝을 알려주는 역할 -문서의 정보를 나타내는 범위 웹브라우저가 해석해야할 정보 제목 설명 스타일, 파일위치 보이지 않는 정보를 작성하는 범위 문서의 구조를 나타내는 범위 로고 헤더 푸터 link를 쓰고 탭키를 누르면 자동완성 한국어로 동작하는 사이트임을 알려주는 lang은 언어 이미지 폴더를 따로 생성해서 이미지만 따로 관리 상대경로 ./ - 주변에서 찾는 개념 (생략이 가능) ../ - 상위폴더 (밖으로 한번 나가세요) 절대경로 htttp - 원격 / - 루트경로 웹사이트에서 local host:5500 적어도 열림 즉, 포트번호로 열수있음 href 링크속성 https://na..