sparta_codingclub(10)
-
자주 쓰이는 CSS 연습하기
1. 자주 쓰이는 CSS 연습하기 「연습할 것들: h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding」 • 로그인 페이지 만들기 • margin과 padding 헷갈리지 않기 - margin은 바깥 여백을, padding은 내 안쪽 여백을 의미함 • 완성 코드 로그인 페이지 아이디, 비밀번호를 입력하세요 ID : PW : 로그인하기 2. 만들어둔 로그인 화면을 가운데로 가져오려면? - 박스 씌우고 양쪽 여백 조정하기. 즉, 전체 div를 만들고, width를 주고 margin: auto 사용하기 • 완성 코드 로그인 페이지 아이디, 비밀번호를 입력하세..
2023.02.19 -
CSS 기초
1. HTML 부모-자식 구조 살펴보기 「HTML 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요함. 나를 감싸고 있는 태그가 바뀌면, 그 안에 내용물도 모두 영향을 받음」 • 빨간색 div 안에, 초록색/ 파란색 div가 들어있음. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/ 파란 div도 모두 함께 이동함 • 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리임. • 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀜. 2. CSS기초 ① css는 어떻게 사용하는가 • 안에 로 공간을 만들어 작성함. 로그인 페이지 ID: PW: 로그인하기
2023.02.19 -
HTML과 CSS
1. HTML과 CSS의 개념 「HTML은 뼈대, CSS는 꾸미기!」 • HTML은 웹의 뼈대를 잡아줌. 웹의 전반을 HTML을 통해 작성 가능 • CSS는 HTML을 통해 작성된 뼈대를 예쁘게 꾸며주는 코드 • HTML 내 style 속성으로 꾸미기를 할 수 있지만, 이것을 한 데 모아 볼 수 있는 CSS파일이 탄생함. HTML코드 내에 CSS파일을 불러와서 적용함 2. HTML 기초 ① VS Code에서 html 파일을 만들고 코드를 적는 공간에 html이라고 적고 ② 자동완성 항목에 html:5를 클릭함 ③ 코드화면에서 오른쪽 클릭 후 open with live server 클릭하기 • HTML은 크게 head 와 body로 구성됨 - head 안에는 페이지의 속성 정보를, body 안에는 페이지의..
2023.02.18 -
웹 브라우저 원리
1. 서버/ 클라이언트/ 웹의 동작 개념 「브라우저는 요청을 보내고, 받은 HTML 파일을 그려줌」 - 브라우저는 그려주는 역할을 함 •우리가 보는 웹 페이지는 모두 서버에서 미리 준비해두었던 것을 받아서 브라우저에서 우리가 볼 수 있도록 그려주는 역할 수행. • 즉 브라우저는 요청을 보내고, 요청의 답으로 받은 HTML 파일을 그려주는 일 • 우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일을 돌려주고 브라우저는 받은 것을 화면에 그려줌 • 항상 HTML 파일로 돌려주진 않고 데이터만 받아서 갈아끼우는 식으로 작동하게 됨
2023.02.16