본문 바로가기
반응형

HTML과 CSS3

CSS 선택자와 선언_1 1. 개념설명image.google.com에서 css selector 를 검색해봄.시각적으로 개념 설명을 보고싶을때 구글의 이미지검색을 사용한다.h1{color:red; font-size:12px;}Selector(선택자):h1Declaration(선언): {}Property(속성): colorValue(속성값): redValue-Property Separator(속성과 속성값의 구분자): ":"DeclarationSeparator(선언과 선언사이의 구분자): ";" 2. 선택자의 종류1) 태그선택자css에서 사용할때 앞에 아무것도 안붙여도됨. 태그명만 쓰고 바로 선언하면된다. 2) id선택자#을 붙여 id선택자를 css에서 사용함.id라는 이름의 속성을 사용하고 속성값을 주면 속성값에 해당하는 태그를 .. 2025. 4. 10.
VScode를 이용한 HTML과 CSS 연결 [250408] 25년도 1일차 코딩공부시작.1. CSS소개-정보의 html과 디자인 css의 분리하여 새로운 문법,언어인 CSS가 탄생한 것.나는 HTML이다. CSS로 폰트 색깔 변경할 것이다. 예시) html과 css가 분리가 되지않은 코드나는 HTML이다. CSS로 폰트 색깔 변경할 것이다. 2. VScode 사용(Visual Studio Code) 하여 실습환경 만들기HTML 일반 구조 자동생성하기1) 폴더 생성 후 html 파일 만들기2) 우측 하단에 파일 형식이 HTML이 맞는지 확인하기3) "!" 느낌표 입력 후 엔터(html:5 입력해도 가능함.)필요한대로 수정해서 사용할것. ex) lang="ko" 2-1. HTML 과 CSS 연결하기index.html파일 에서 태그 안에 아래의 태그를.. 2025. 4. 8.
[HTML, CSS] CSS로 HTML꾸미기 기초 (1) 1. HTML 과 CSS 연결하기 index.html파일 에서 태그 안에 아래의 태그를 넣어 style.css파일을 index.html파일과 연결해준다 2. [style.css] 파일 : Class 에 style을 주려면 앞에 .을 붙인다 .red{ color: red; background-color: yellow; text-align: center; } .border-blue{ border: 5px solid blue; } .img-size{ width: 200px; height: 200px; } .margin-space{ margin-top: 40px; margin-left: 100px; margin-bottom: 40px; } .padding-space{ padding-top: 40px; paddi.. 2023. 10. 21.
반응형