Front end/HTML, CSS

[HTML / CSS] Chrome 개발자 도구 Sources 탭에 Console창 표시하기

[문제발생] 기존에 크롬(Chrome)에서 Script를 디버깅할 때, F12를 눌러서 개발자도구를 많이 활용했었는데 노트북에서 pc로 세팅하면서 Sources 탭 하단에 Console창이 보이지 않아서 당황했습니다 ㅜㅜ Console 탭도 존재하긴 하지만, 저는 동시에 보면서 활용했기때문에,, 왔다갔다 하면서 보기에는 불편하더라구요..😥 [해결방법] 해결방법은 허무할 정도로 간단했습니다. ㅎㅎ Sources탭에서 ESC만 누르면 아래 이미지와 같이 짜잔..! 등장! 해결완료~!!😆

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