예습/웹표준 수업(22.2.28 ~ 22.4.25)
내일배움카드(재직자) 웹표준 수업 / 3월16일 (수) 6회차
밀김
2022. 3. 16. 21:52
728x90
▶예시 표시하기 placehold
<input type="text" placehold="미리표시할 글자">
▶필수입력사항 만들기 required
<input type="text" required>
▶글자를 눌러도 선택 가능하게 설정 lable
<label> <input type="radio" name="gender" value="male">남 </label>
*selet의 size를 넣어주면 목록이 펼쳐지고, multiple 속성까지 넣으면 다중선택가능
<select size="4" multiple>
▶키보드 커서 위치 설정 autofocus
걍 속성으로 input 안에 붙이기만 하면 된다
CSS: Casecade style sheet 계단식 스타일 문서
CSS작성방법
<head>
<style type="text/css">
꾸밀대상{속성:속성값; 속성:속성값;}
↑
선택자
</style>
</head>
*선택자 종류
1. html 태그: h1{속성:속성값;}
적용: <h1></h1>
2. 아이디(id): #이름{속성:속성값;}
적용: <h1 id="이름"> </h1>
3. 클래스(class): .이름{속성:속성값;}
적용: <h1 class="이름"> </h1>
4.모든 태그 소환: *{속성:속성값;}
적용:html 본문에 작성하는 모든 태그에 스타일 강제 적용
5.자식 선택자: li>a {속성:속성값;} = li에 속한 a
적용: <ul>
<li><a href="https://www.youtube.com/" alt="유튜브">김미리</a></li> → 적용됨
<li>김미나</li>
<li>김모리</li>
<li>김꼬미</li>
</ul>
<a href="https://www.youtube.com/" alt="구글" target="_blank"><strong>네이버</strong> 유두브로 이동</a> → 적용안됨
6.인접 선택자(잘 안쓰는 태그): h1+h2{속성:속성값;} →h2한테만 적용된다
적용: <body>
<h1>웹문서 만들기</h1> → 적용x
<h2>html</h2> →적용o
<h2>css</h2> → 적용x
<h2>자바</h2>→적용x
<h2>js</h2> →적용x
</body>
7.속성 일괄적용 선택자(id,class,alt,title) : html태그[class]{속성:속성값;}
적용:
<style type="text/css">
li[class]{font-size: larger;} </style> ★[ ]안에 class 값을 적으면 안된다.무조건 class 라고 전체지정값을 적 어야함.클래스값인 link쓰면 안먹힘
</head>
<body>
<ol>
<li>하나</li>
<li class="link"><a href="#">둘</a></li>
<li>셋</li>
<li class="link"><a href="#">넷</a></li>
</ol>
</body>
*minlength : 최소 글자수
*[ ]는 이 안에 있는 속성값 모두를 지칭한다. id 나 class..
예) *[class]{padding: 50px;} = 모든 class의 패딩값이50px게 한다
*링크주소는 없고 걍 링크 자체만 만들고 싶으면 href="#" 넣으면 된다
728x90