[CSS]
-HTML은 콘텐츠와 디자인을 구분.
-style : head 태그 안에 넣음.
[css 기본 문법]
선택자 {
속성 : 속성값;
속성 n : 속성값 n;
}
[css 선언방식 3가지]
1. 태그 선택자 - 태그명 지정해서 ( 모든 태그명에게 적용됨)
2. 클래스 선택자 - 내가 적용할 클래스를 정해놓고 지정하는 기법 (재활용을 하기 위한 목적으로 만들어짐)
3. 아이디 선택자- 특정 대상 하나만을 위해서 만든 선택자.(하나의 페이지에서 하나의 값만 사용가능)
[css 적용방식 3가지]
1. 인라인 적용방식 - body에 직접 입력하는 방식.추천하지 않음.
2. 임베디드 적용방식 - 해당 페이지에서만 적용하는 방식 (전반적인 정보를 head태그 안에서 제시.)
3. 익스터널 적용방식 - 반복적으로 사용하는 css를 따로 저장하여 필요할 때마다 불러오는 행위.
css는 시멘틱태그 제외하고 속성 적용됨.
대속성 : 대표가 되는 속성. 하나의 단어로 이루어져 있고
새속성 : 대속성 이름에 -가 들어감.
background-image : url(' ');
background-repeat : repeat-y;
(repeat | repeat-x | repeat-y |no-repeat)
background-position :250px 100px;/*이미지 사이즈*/
background-attachment: fixed; /*이미지 고정*/
font-size : 30px;
color : blue;
font-weight : bold;
font-family:'궁서';
position: absolute;
top :100px;
left : 200px;
z-index : 5;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ text-align: center; font-size :40px; } table{ border-top: 3px double darkblue; border-bottom: 3px double darkblue; width:370px; border-spacing:0px; margin:0px auto ; } .cell1{ background-color: skyblue; font-size : 15px; border-right : 2px dotted darkblue; border-bottom : 2px dotted darkblue; } .cell2{ background-color: skyblue; font-size : 15px; border-right : 2px dotted darkblue; } .cell3{ font-size : 15px; border-bottom : 2px dotted darkblue; } .cell4{ font-size : 15px; } .box{ border : 1px solid gray; font-size : 15px; background:skyblue; color :darkblue; } </style> </head> <body> <h1>회 원 가 입</h1> <table> <tr> <td class = "cell1">*아이디</td> <td class = "cell3"><input type = "text" name = "id" value = "test" class="box"/></td> </tr> <tr> <td class = "cell1">*비밀번호</td> <td class = "cell3"><input type = "password" name = "pwd" id ="userpwd" class="box"/></td> </tr> <tr> <td class = "cell2">*연락처</td> <td class = "cell4"><input type = "text" name = "tel" class="box"></td> </tr> </table> </body> </html>
'개발자 > 백엔드 웹 개발자 과정(국비)' 카테고리의 다른 글
| 자바스크립트(4)_재귀함수 ,팝업, (0) | 2022.12.30 |
|---|---|
| 221230_자바스크립트(4) (0) | 2022.12.30 |
| 자바스크립트(1)_2022-12-27 (0) | 2022.12.27 |
| HTML(3),css(1)_2022-12-26 (0) | 2022.12.26 |
| HTML<2>_2022-12-23 (0) | 2022.12.23 |