IT업계 종사자의 블로그

focus-within : focused인 자식을 가진 부모 엘리먼트에 적용되는 것. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } form { border: 1px solid salmon; display: flex; flex-direction: column; padding: 20px; } form:focus-within { border-color: seagreen; } style> head> body> form> input type="text" name="" id="" /> input type="text" name="" id="" /> input type="..

placeholder에 "name" 이라는 단어를 포함한 모든 input의 배경색을 pink로 설정해보기 DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } input { border: 1px solid wheat; } input:required { border-color: tomato; } input[placeholder~="name"] { background-color: pink; } style> head> body> div> form> input type="text" placeholder="First name" /> input type="text" placeh..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } span { background-color: yellowgreen; padding: 5px; border-radius: 10px; } p span { color: white; } style> head> body> div> span>hellospan> p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi e sequi ipsam odio dolorem. span>insidespan> p> div> body>html>   결과여기서 첫 번째 ..

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 ..

url 앞에 linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) 추가 결과물

주석이란? 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용 - 주석처리: command + / - 주석풀기: command + / 번외. css가 길어지면 —> css만 따로 분리할 수 있음 (우클릭 - 새로만들기 - 스타일시트 생성 후 - 새 스타일시트에 html 파일에 있던 / 내용 안에 있는 내용을 그대로 복붙 —> 그 css 파일을 불러오는 거: href = “mystlye(생성한 이름).css”

html로 로그인 페이지 구성하기 (뼈대) 태그 줄맞추기 - body 태그 전체 선택 후, (맥기준) option + command + l 들여쓰기: tap 전체 들여쓰기: 전체선택 + tap div 추가하기 : 박스역할! 크롬에서 확인하면 위와 같이 나타남 CSS: 짱구의 바지!! 1. 이름표를 붙인다 : class 2. OOO하라고 수식한다 : 를 통해 mytitle를 수식할 태그를 적는다 예시의 결과 color: white; 추가 결과물 text-align: center; 추가 결과물 background-image: url 추가 결과물 background-size: cover; 추가 결과물 background-position: center; 추가 결과물 백그라운드에 url 이미지를 넣을 땐 위 3개..