*먼저 코딩 연습할 사이트 열기
가장 하단에 있음.
HTML : 배우 (보여지는 것)
CSS : 코디 (꾸며주는 것)
ㅡ HTML 과 CSS 의 관계
꾸며주는 속성은 CSS에 넣어준다. 둘을 이어준다.
HTML
-구조 : 에리먼트 = 요소
<html>
<head> </head> : 엘리먼트 하나의 태그가 시작되고 /끝나는 것
<body>
>>>>>>여기 내용 작성 하게 됨
<div> </div> ; 가장 기본적인 태그 ( 나누다)
</body> :헤드와 바디는 형제자매
</html> 아래에는 모두 자식
-반복 주기 구조
section{$ 안녕}*5 후 탭
li*4>a ==각각a 버튼이 4개 생긴다.
target="_blank" 새창으로
ex)
<body>
<h1> 예제 </h1>
<div>11</div>
<section> 22 </section>
<div> 33</div>
<section> 444 </section>
</body>
CSS 선택자란?
CSS 가 HTML을 연결해주는 방법
* {} = 모두선택
div section {
background-color:blue;
margin:10px;
display : inline-block;}
div,section { } = 태그선택자 (둘다 꾸며줌 )
div section { } = 후손 선택자 (div 안에 section을 모두 꾸며줌 )
div > section { } = 자식선택자 (div 의 자식 인 section만 꾸며줌 )
section > article > div { } ==자식의자식
<예시>
하나의 엘리먼트만 값을 주고 싶다면 HTML에서 아이디 속성을 줌
HTML
<div id="a1"> 엘리먼트 </div>
<div class="a2"> 엘리먼트2 클래스 </div>
<div class="a2">엘리먼트3 클래스 </div>
CSS
#a1 {
color : blue;
font-size : 200px;
} =엘리먼트 하나만 선택.
div#a1 = div이면서 id속성이 a1인 녀석만 선택 (아이디 중복안됨)
.a2 {} =클래스 전체 선택 해서 꾸며줌
div.a2 = div이면서 클래스속성이 a1 인 녀석들 선택 (여러 엘리먼트가 같은 클래스 가능 )
CSS 선택 방법 2
# nth-child , nth-of-type
div:nth-child(2) ==div중에서 2번째 자식 .
div:nth-child(3) ==3번째 자식 .
div:nth-first=child(1) == div중에 앞에서 1번째
div:nth-last=child(1) == div중에 뒤에서 1번째
div:first-of-type() == div 중에 앞에서 ()몇번째
div:last-of-type() == div 중에 뒤에서 ()몇번째
ex)
div:first-child{ } == 첫번째
section div:nth-child(2){
color:red;
}
section div:nth-last=child(1){
color:red;
}
section div:nth-of-type(1){
color:red;
}
HTML 기본 태그
ㅡ리스트
ul : unorderde list 순서 상관 없음. (점)ㅡli
ol : ordered list 순서 중요함. (1.2.3.4. 순서나옴) ㅡ li
dl : 데이터 리스트 (단어의 정의)
HTML
<ul>
<li><a href="#" target="_blank">네이버</a></li>
<li><a href="">다음</a></li>
<li><a href="">구글</a></li>
<li><a href=""></a></li></ul>
CSS
ul>li:nth-child(2){
display:none;
}
ul>li:nth-child(1)>a {
color:red; == a글자 빨간색
}
}
CSS 노멀라이즈=초기값 주기
# inherit 속성값 = 상속 (즉 따라쟁이)
>>대표적인 속성값
text-align ,color, font-size 등이 있다.
<예시>
ul, li {
list-style:none;
padding:0; = 박스의 안쪽 여백
margin:0;
}
div {
color: inherit;
}==div기본값이 상속
section {
text-align:center;
} --중간으로 정렬
HTML 기본 태그
<br> 줄바꿈
*연습 사이트
주소: codepen.io/pen
-회원가입후 - new pen 열기
-세이브 했을때 상단에 뜨는 url 이 남는다. 그 url을 이용해서 다른 pc로 접속 가능 .
-settings 4칸으로 수정하기 . 클린코딩 Tidy HTML 누름.
-자동정렬 Tidy HTML
'언어 > HTML & CSS' 카테고리의 다른 글
| 입문) CSS (float을 이용한 풀다운 메뉴) (0) | 2023.06.10 |
|---|---|
| 입문) HTML 과 CSS (float 과 부작용 해결) (0) | 2023.06.10 |
| 입문)HTML 과 CSS (풀다운 메뉴 와 position) (0) | 2023.06.04 |
| 입문) HTML 과 CSS (LIST , 간단한 메뉴 리스트) (0) | 2023.06.04 |
| 입문) HTML CSS (display 속성 block) (0) | 2023.06.04 |