IT업계 종사자의 블로그

pseudo selectors: 좀 더 세부적으로 엘리먼트를 선택해 주는 것!   기본 코딩DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } div { width: 300px; height: 300px; background-color: wheat; position: relative; } style> head> body> div>div> div>div> div>div> div>div> div>div> div>div> body>html>    결과  pseudo selectors 사용하기 (first-child & last-child)DOCTYPE html>html ..

position relative 사용하기  기본 코딩DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } div { width: 300px; height: 300px; background-color: wheat; } .green { background-color: teal; height: 100px; width: 100px; } style> head> body> div> div class="green">div> div> body>html> (body: div안에 div 만들기)  결과 여기서 초록색 div를 아주 조금만 옮겨보자.DOCTYPE html>html lan..

position: fixed--> 그 자리에 계속 위치해 있게 하는 것   1. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 20px; } div { position: fixed; width: 300px; height: 300px; background-color: teal; } style> head> body> div>div> body>html>     결과 스크롤을 계속 내려도 div 박스가 계속 그 자이레 위치해 있다. postion: fixed; 를 적용하면 가장 위에 있는 레이어가 된다   2.DOCTYPE html>html lang="kr"> head> title..

inline-block은 1. 브라우저가 block으로 인식함.2. 높이를 가질 수 있음.3. 사방에 margin도 가질 수 있음.4. 바로 옆에 다른 요소가 올 수도 있음.5. but, 반응형 디자인을 지원하지 않는다.DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { margin: 20px; } div { display: inline-block; width: 50px; height: 50px; background-color: teal; } style> head> body> body>html>     결과

1. 실선 테두리 넣어보기DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } body { margin: 20; padding: 20px; background-color: thistle; } div { padding: 20px; border: 2px solid black; } #first { background-color: whitesmoke; width: 150px; height: 150px; } #second { background-color: teal; width: 100px; height: 100px; } #third { background-color: wheat; ..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> div { height: 150px; width: 150px; background-color: tomato; } span { display: block; background-color: turquoise; } style> head> body> div>div> hello hello body>html>   결과

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> head> body> body>html> style 안에 있는 div는body 안에 있는 각 div 들을 가리킨다.      결과 div 박스가 3개 연달아서 노출됨.참고로 박스의 옆에는 어떤 다른 박스도 오지 않는다.  박스의 이런 특징을 block 이라고도 한다.

방법 1같은 HTML 파일에 HTML 코드와 CSS를 코드를 놓는 방법1-1. style 태그 사용 (head 태그 안에 있어야 함)1) html 태그 안에 head> body> header> h1>The Nick Timesh1> header> main> address>123 Road Altavistaaddress> main> footer>© 2024.NNfooter> body>html>       ✅ 방법 2CSS와 HTML을 분리시키는 방법1-1. 태그 사용1) style.css 파일 만들기 2) link 태그로 연결해주기DOCTYPE html>html lang="kr"> head> title>Home - My first website.title> head> body> header> h..

DOCTYPE html>html lang="kr"> head> title>Home - My first website.title> head> body> form> Website Website input type="submit" value="Create Account" /> form> body>html> div는 의미없는 박스라고 생각하면 된다. div 태그를 사용해서 위 아래로 위치하게 만들 수 있다.      결과

DOCTYPE html>html lang="kr"> head> title>Home - My first website.title> head> body> form> Profile Photo First Name input required placeholder="Last Name" type="text" /> input required placeholder="Username" type="text" /> input required placeholder="Password" minlength="10" type="password" /> input type="submit" value="Create Account" /> form> body>html>   결과- Profile Photo 문자 클릭 시: 파일창이 열림- F..