HTML

[HTML / CSS] 스파르타 코딩클럽 - 신년운세 코딩 패키지 2주차

01. 2주차 완성물: 신년특집 운세 패키지 띠별 운세페이지를 만들고 반응형 웹으로 변경한다. 02. index.html 과 result.html 을 연결하기 a 태그의 href 속성에 이동할 페이지를 넣어준다. 쥐 03. 버튼 만들기 버튼 2개를 div 태그로 묶어준다. 뒤로가기 공유하기 04. 버튼 가운데 정렬하기 display:flex 를 통해 정렬한다. .btns { display: flex; flex-direction: row; justify-content: center; } 05. 모바일 버전 확인 크롬 개발자 도구 → 모바일 버튼을 클릭 06. 모바일 버전 처리하기 스크린 사이즈가 780px 이하일 때 → body의 백그라운드 색을 초록색으로 바꿔라! @media screen and (max..

[HTML / CSS] 스파르타 코딩클럽 - 신년운세 코딩 패키지 1주차

01. 1주차 완성물: 신년특집 운세 패키지 index 페이지의 기본 뼈대를 구성하고, 캐릭터인 르탄이들을 12개의 원 모양에 배치하였다. 02. HTML 기초 아래 소스를 통해 HTML에서 자주 사용하는 태그들을 배웠다. 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요? 03. clas..

[HTML] HTML 기초 - head와 body

안녕하세요! 오늘은 html의 기초- head와 body에 대해 알려드리겠습니다~ [ HTML이란? ] 정의: 웹페이지를 만들기 위한 언어 역할: 웹브라우저의 뼈대 역할로, 구역을 나누는 게 중요함. [ HTML 실습해보기 ] 그럼, 간단한 코드로 HTML을 이해해봅시다! VS Code를 활용하기 때문에, 설치가 안되신분들은 아래포스팅 참고해주세요! VS Code (Visual Studio Code) 설치하기 안녕하세요! 오늘은 Window 10 에서 VS Code를 설치하는 방법을 알려드릴게요! 1. Visual Studio Code 다운로드 받기 - 아래 사이트에 접속합니다. Download Visual Studio Code - Mac, Linux, Windows Visual S.. soo-vely-..