HTML/CSS 강의 2일차 : span태그, id와 calss, 문단 속성, margin과 padding
2021. 12. 26. 00:43ㆍ저는 HTML으로 디자인 합니다
<p>여기서 <span>요기요기만</span> 스타일을 다르게 주고싶다면 span태그를 쓰면 된다</p>
p {color:red;}
p span {color:blue;}
이렇게하면 span태그안에 있는 컬러만 블루가 된다.
<p id="hello">아이디는 중복 될 수 없다</p>
<p id="hello">그래서 이 태그는 안된다</p>
<p class="bye">클래스는 중복 가능</p>
<p class="bye">스타일 똑같이 적용 가능!</p>
<p id="hello">여기다가 스타일을 준다면? 아이디니까 스타일시트에서는 #으로 시작하고 class는 .으로 시작</p>
p#hello{
width:1200px;
height:130px;
/*여기까지가 영역잡기*/
font:normal 14px/21px '바른고딕'; /*그룹속성은 (폰트스타일, 크기/행간, 폰트패밀리)*/
color:blue;
letter-spacing:0px /*자간*/
text-align:justify /*텍스트 정렬(justify는 양끝정렬)*/
text-decoration:none; /*링크는 자동 밑줄이기 때문에 기본값 밑줄 없애는거*/
text-indent:20px; /*들여쓰기*/
/*여기까지가 문단속성*/
border:solid 1px gray; /*영역에 선넣기, 사이즈, 컬러*/
margin:110px auto; /*영역 밖 여백값 (auto는 반응형 맞춰서 가운데 정렬)*/
padding:20px; /*영역 안 여백 값*/
background:rgb(211, 211, 211);
}
'저는 HTML으로 디자인 합니다' 카테고리의 다른 글
HTML/CSS 강의 6일차(1) : li응용, dl(정의된 리스트), hover (0) | 2022.01.09 |
---|---|
HTML/CSS 강의 5일차 : form만들기, li(리스트)기초 (0) | 2022.01.05 |
HTML/CSS 강의 4일차 : 게시판 만들기, 테이블 응용 (0) | 2022.01.04 |
HTML/CSS 강의 3일차 : 예시만들기, block요소, float과 margin, 테이블 만들기 (0) | 2021.12.30 |
HTML/CSS 강의 1일차 : 웹접근성, 비주얼스튜디오 툴, 마크업 언어 (0) | 2021.12.22 |