프론트엔드공부(40)
-
CSS 한 걸음 더
CSS Diner 소개 - 기본적은 CSS 선택자 복습 ● : 가상클래스 ● :: 가상요소 ● 태그이름 ● .을 이용해서 클래스 선택가능 ● #을 통해서 id 선택가능 추가적인 CSS 선택자 ● *로 모든걸 선택할 수 있음 ● 선택자 + " " + 선택자 로 선택가능 ● 선택자 + "+" + 선택자: 다음 클래스에 적용가능 ● 선택자 + ">" + 선택자: 직계자손만 선택해서 적용가능 ● 선택자 + "~" + 선택자: 앞 선택자 다음에 뒤 선택자 나오면 적용 ● [] : 속성 선택자 CSS 가상 클래스 ● : 로 선택함 ● :hover 는 마우스를 올리면 적용 ● :link 는 사용자가 클릭하기 이전의 링크에 적용 ● :visited 는 클릭을 한번이라도 한 링크에 적용 ● p:net(.class) 는 ..
2023.03.09 -
HTML 한 걸음 더(2)
사용자 몰래 값을 전달하는 input 태그의 hidden 속성 ● 동일한 폼이 여러개 있거나 그 폼을 제출하면서 서버가 알아야할게 있다면 hidden속성 사용함 이모티콘 같은 문자는 svg태그 ● vector data: 그래픽이 어떤 부분에서 어떤 모양으로 휘어지는지, 어떤 색으로 채워지는지 정보를 가지고 있기 때문에 확대해도 깨지지 않음 ● bitmap data: 확대를 할 때 이미지가 깨짐 ● svg는 vector data i태그의 재활용-fontawesome, bootstrap ● cdn가지고 와서 link 태그 안에 넣기 ● fontawesome, bootstrap에서 원하는 아이콘 찾아서 i태그로 복사 붙여넣기 ● html을 복사해서 body안에 넣어도 되지만 안에 내용이 무엇을 의미하는지 모르..
2023.03.08 -
HTML 한 걸음 더(1)
웹어플리케이션이란 ● 정적인 콘텐츠를 보여주기만 하는게 아니라 우리의 웹페이지에서 사용자와 소통을 할 수 있는 곳 .top-left span { cursor: pointer; } .top-left span:nth-of-type(1):hover { color: red; } #fill-heart { display: none; fill: red; } ● 커서와 클릭을 통해 하트가 반응하게 만들 수 있음 정보를 제출할 땐 form태그 ID : PW : ● form 태그로 로그인 입력창 만들기 ● 로그인 클릭 시 result.html로 가게 만들기 form 태그의 action과 method 속성 ● form 태그엔 action과 method를 필수로 가지고 있어야함 ○ action은 사용자가 input태그를 통해..
2023.03.08 -
인스타그램 피드 레이아웃
기본 구조 잡기 body { background-color: #c6c6c6; margin: 0px; } .wrap { background-color: white; width: 375px; height: 100vh; margin: 0 auto; display: flex; align-items: center; } .instargram { width: 100%; height: 550px; border: 1px solid black; display: grid; grid-template-columns: 1fr; grid-template-rows: 50px 375px 1fr; grid-template-areas: "header" "img" "footer"; border-top: 1px solid lightgray;..
2023.03.07 -
CSS 레이아웃
div태그로 공간 나누기 ● 일단 div태그로 나누자 ○ 유지보수가 쉬워짐 ○ 협업이 쉬워짐 ○ class와 id이름은 직관적으로 넣자(명사+명사 형태로) inherit ● 자식태그는 부모태그의 스타일 속성을 따라감 px,em,rem ● 일반적으로 16px = 1em = 1rem ● 부모태그에게 font-size 속성이 있으면, 그 속성을 1em으로 계산함 ● rem은 16px로 설정되어있음 ● font-size같은 경우는 rem으로 해줘야함 ○ 크롬브라우저에서 글꼴크기를 변경하면 px은 작동되지않음(크기가 변하지 않음) ● 일반적으로 px이 가장 많이 사용됨 레이아웃 만들기- display_inline .container { width: 100px; height: 600px; border: 1px so..
2023.03.06 -
HTML 기본 태그
문단을 표현할 땐 p태그 ● p태그는 문단의 시작을 알림 ● p태그 안에서 공백을 만들어도 브라우저에서는 보이지 않음 ● 줄바꿈이 필요할땐 br태그로 줄바꿈을 해줘야함 ● => >, & => 공백 ● html entities로 특수한 문자 알 수 있음 제목을 표현할 땐 h태그 ● h1부터 h6까지 있음 ● 1에서 6으로 갈 수록 글자크기가 줄어듬 목록을 보여주는 ul,ol,li태그 ● ol: 순서목록 ● ul: 순서가 없는 목록 ● li: 목록의 내용 폰트 스타일을 위한 태그 ● b: 단순히 글자만 굵게 ● i: 기울게 ● u: 고유명사, 철자가 틀렸을 때 ● s: 문서의 내용이 틀렸을 때 ● del: 예전 버전에는 있었는데, 최신 버전에는 삭제된 내용 특별한 의미를 가지고 있는 Se..
2023.03.05