대학생 쩡딱구리

HTML과 CSS에 대한 개념을 4일 동안 학습한 후 5일부터 본격적으로 웹사이트를 만들기 시작했다! 우선 가장 중요한 뼈대, 레이아웃 만들기! 1. div 태그와 span 태그 HTML 문서에서 div 태그와 span 태그는 정말 많이 사용된다. 둘이 무슨 차이가 있냐고 묻는다면 아래 코드와 결과를 보면 좋다. DIV 1개 DIV 2개 DIV 3개 SPAN 1개 SPAN 2개 SPAN 3개 즉, div와 span의 차이는 줄바꿈의 여부이다. div는 입력 시 자동으로 줄바꿈이 되고, span은 줄바꿈이 되지 않는다. 엄밀히 말하면 둘의 차이는 단순히 줄바꿈보다는 display 속성에 의한 것이다. 간단히 설명할 때, 문서의 소스코드를 검사해보면 div 태그에는 display: block; 속성이 설정되..

꽤 어려웠던 패딩과 마진 적용하는 방법! 글로 적으면서 다시 한 번 복습하려고 한다! 1. 패딩과 마진 패딩(padding)과 마진(margin)은 CSS에서 여백을 나타내는 중요한 속성이다. 패딩은 박스 테두리와 안쪽 내용 사이의 여백, 마진은 박스 테두리 바깥의 여백을 의미한다. 클릭이 가능하도록 버튼 기능을 이용할 경우 마진이 아닌, 패딩까지를 클릭의 범위로 인식한다! 예를 들어 아래와 같이 여백을 설정했을 때, 내용과 박스 테두리 사이의 여백이 20px, 박스 테두리 바깥의 여백이 10px일 것이다. margin: 10px; padding: 20px; 패딩과 마진을 활용해 아래 네비게이션 바를 만들 때, 아래의 두 가지 방법이 가능하다. 패딩을 활용할 때 📝 글쓰기 📎 파일 첨부 📂 임시저장 마진..

서포터즈 활동에 뭐에 바빠서 3~5일차를 밀려버렸는데 설 연휴가 있어서 다행이다...! 기본적인 CSS 사용법에 대해서는 2일차 게시글에 다루었으니 아래 게시글을 참고하면 좋을 것 같다. 코뮤니티 모각코 웹 기초 2일차: HTML, CSS 본격적으로 시작하기 2일차 후기를 쓰기 전 좋은 소식이 하나 생겼다. 바로바로...! 내가 코뮤니티 서포터즈에 합격했다! 열심히 하겠습니다. 뽑아주셔서 감사드려요😊! 메일이 빨리 오기를 손꼽아 기다리는 중이다. jjeongttakgoori.tistory.com 오늘은 모각코 3일차 내용, CSS를 보다 효과적으로 사용하는 방법과 폰트를 사용하는 방법을 공부해보려 한다! 1. CSS를 적용하는 세 가지 방법 HTML 태그에 바로 적용 코딩은 코뮤니티에서! HTML 문서에..

2일차 후기를 쓰기 전 좋은 소식이 하나 생겼다. 바로바로...! 내가 코뮤니티 서포터즈에 합격했다! 열심히 하겠습니다. 뽑아주셔서 감사드려요😊! 메일이 빨리 오기를 손꼽아 기다리는 중이다. 1. HTML의 기본 구조 코뮤니티 웹 기초 1일차: 웹 개발 시작하기 1. 웹 개발 시작하기(에디터 설치) 많고 많은 에디터가 있지만 수업에서는 Visual Studio Code를 다루고 있고 나 역시 코딩을 하면서 설치해둔 Visual Studio Code를 사용했다. Visual Studio Code가 편한 이유.. jjeongttakgoori.tistory.com 어제 웹 개발, HTML의 기초를 배우면서 태그를 주로 다루었는데 그 내용과 오늘의 내용이 맞닿아 있다. HTML은 마크업 언어이기 때문에 모든 H..

1. 웹 개발 시작하기(에디터 설치) 많고 많은 에디터가 있지만 수업에서는 Visual Studio Code를 다루고 있고 나 역시 코딩을 하면서 설치해둔 Visual Studio Code를 사용했다. Visual Studio Code가 편한 이유는 에디터를 여러 개 설치하지 않고 하나를 설치했을 때 C언어 전반(C++, C# 포함), JavaScript, Python, HTML을 비롯한 여러 언어를 사용할 수 있기 때문이다. Visual Studio Code 홈페이지를 아래에 첨부했다. Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and ..