웹어플리케이션이란 ● 정적인 콘텐츠를 보여주기만 하는게 아니라 우리의 웹페이지에서 사용자와 소통을 할 수 있는 곳 .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태그를 통해..

기본 구조 잡기 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;..

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

문단을 표현할 땐 p태그 ● p태그는 문단의 시작을 알림 ● p태그 안에서 공백을 만들어도 브라우저에서는 보이지 않음 ● 줄바꿈이 필요할땐 br태그로 줄바꿈을 해줘야함 ● => >, & => 공백 ● html entities로 특수한 문자 알 수 있음 제목을 표현할 땐 h태그 ● h1부터 h6까지 있음 ● 1에서 6으로 갈 수록 글자크기가 줄어듬 목록을 보여주는 ul,ol,li태그 ● ol: 순서목록 ● ul: 순서가 없는 목록 ● li: 목록의 내용 폰트 스타일을 위한 태그 ● b: 단순히 글자만 굵게 ● i: 기울게 ● u: 고유명사, 철자가 틀렸을 때 ● s: 문서의 내용이 틀렸을 때 ● del: 예전 버전에는 있었는데, 최신 버전에는 삭제된 내용 특별한 의미를 가지고 있는 Se..

HTML 기본구조 ① HTML: HyperText Markup Language ● 사용자(유저)가 브라우저를 통해서 웹페이지에 접속을 할 때, 개발자가 사용자에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만들어놓은 문서 ● html태그안에 head태그와 body태그를 적는것이 가장 기본적인 구조 ● head태그에는 body태그를 읽기 이전에 알아야할 정보와 이 HTML 파일의 기본적인 정보를 ● body태그 안에는 사용자에게 보여주고 싶은 콘텐츠를 넣음 ● 버전 확인을 위해 doctype선언을 꼭 해줄것 ● ! + enter키로 기본적인 구조 만들 수 있음 HTML 을 이루는 Tag- 태그의 선언 ① 태그 사용방법 ● 안에 태그이름을 넣어주면 됨 ● 여는태그 닫는태그 ● 여는태그와 닫는태그 사이..

컴퓨터 구조와 내면의 원리 파악 ① 컴퓨터 시스템 ● 하드웨어(Hardware)와 소프트웨어(Software)로 구성 ○ 주요 하드웨어: CPU(중앙처리장치), Memory, Storage, Network등 ○ 주요 소프트웨어: 운영체제와 응용프로그램 ② 폰노이만 구조(현 컴퓨터 구조) ● 폰노이만이라는 분이 제안한 구조 ● Memory에 프로그램과 데이터가 저장 ● 하나씩 꺼내어 CPU: Arthmetic Logic Unit으로 연산 ● 폰노이만 구조 이전: 컴퓨터들은 다른 작업을 하려고 할 때 스위치 설치, 전선 재배치하여 데이터 전송, 신호 처리 ● 폰노이만 구조 이후: 소프트웨어만 교체하면 됨 ③ 컴퓨터 주요 구성 요소(3가지가 핵심) ● CPU(중앙처리장치, Central Processor Un..