빡공단

오늘 빡공단 1일차!결제하고 미리 듣고 싶었지만, 다른 사람들과 함께 시작하고 싶은 마음에 6월 30일까지 엄청 참았다!첫 강의라 깊은 내용을 다루지는 않았다.강사님의 소개와 HTML, CSS에 대해 간략하게 설명해주셨다.1강이 1분 42초밖에 되지 않아 적잖이 당황했

[2강] 개발 환경 설정 크롬 설치

html 문서의 구조html 문서를 작성하기 위한 태그➰ 하얀 원 표시: 해당 파일이 저장되지 않았다! ➡ Ctrl - S로 저장 ➡ 브라우저에서 새로고침➰ 텍스트 생성!웹 서핑을 통해 웹 페이지를 많이 보면 단순히 글자만 있는 게 아니라 버튼, 음악, 비디오, 여러

텍스트를 컨트롤하는 태그폼, 버튼들을 추가할 수 있는 태그: 줄바꿈 태그. 닫는 태그가 없다!➰ 닫는 태그 없이 br만 넣어도 자동으로 줄바꿈이 된다.➰ p 태그 안에서는 br 태그로 인해 줄바꿈만 발생하고, p 태그끼리는 단락이 바뀐다.: 굵은 글씨b태그, stron

블록 요소인라인 요소: 좌우로 가로 크기가 쭉 100%로 늘어나 있고, 한 줄을 다 차지하는 것콘솔창➰ 파란색 상자: 해당 태그의 진짜 가로 세로의 크기➰ 주황색: 여백➰ h1과 p 태그는 오른쪽으로 쭉 펼쳐져 있다.➡ 블록 요소!한 줄을 다 채워버린다.input 태그

[6강]

css: 태그의 스타일을 지정해준다.ex) 글자 색, 태그의 크기 등 세부적인 값❗ 작성 방법css 작성 방법1. head 태그 안에 자식 태그로 style 태그 작성2\. div 태그 작성3\. div 안에 있는 hello 글씨의 색을 바꾸기 위해 style 태그 안

[8강] 배경과 테두리 입히기 >- css border 속성 ⭐ border 속성 : 테두리를 입히는 속성 border 속성 ➰ none: 테두리 없애기 ➰ solid: 테두리 실선 ➰ dotted: 테두리 점선

font-sizefont-family: 폰트 크기 설정➰ 웹 페이지는 기본적으로 크기가 16px로 지정되어 있다!: 글꼴 바꾸기➰ 여러 개의 폰트 적용 가능: 앞에서 정의된 폰트가 없으면 다음 폰트, 다음 폰트도 없으면 그 다음 폰트... 등 폰트가 없을 경우를 대비해

id, class 선택자그 외 선택자 ➰ 같은 태그를 다른 스타일로 지정하고 싶을 때 기존 태그 선택자로는 따로 구분할 수 없다.: 선택자, 특정 부분만 선택해 문서 안에서 한 번만 적용. ➰ 어떤 태그에서도 사용 가능➰ id 선택자는 앞에 ➰ top 선택자와 bot

가상선택자: 마우스를 올리고 있을 때 나타날 스타일 지정. ➰ div에 hover을 적용해도 아무런 변화가 없다?! ➰ 마우스를 올리고 있는 게 보이지는 않지만, 마우스를 올려야만 효과가 나타난다. ➰ 그냥 있을 때는 아무런 변화가 없지만?! ➰ 마우스를 가져다대니 로

inline-block ➰ 현재 div 태그를 두 개 넣은 상태.➰ div 태그는 block 요소이기 때문에 여러 개를 이어서 적어도 한 줄에 들어가지 않고 다음 줄로 밀려난다. ➰ span 태그 하나를 넣고, width, height을 각각 100px로 넣은 상태.➰

text-align: 정렬할 때 사용.👏 자기 자신이 여유가 있을 때, 즉 자기 자식들이 이동할만큼 크기가 넓을 때와 자기 자식이 inline 일 때만 적용된다. ➰ 가운데 정렬! ➰ inline 요소인 span에는 써도 의미가 없다.➰ 자신의 가로 크기가 'span

marginpadding ➰ margin 적용➡ 상하좌우로 전부 50px씩 주황색으로 바깥쪽 여백을 둔다. ➰ padding 적용➡ 초록색으로 여백을 표시한다. ➰ div(block 요소)뿐만 아니라 span(inline 요소)도 가능하다.➰ but, margin이 위

position 속성: 원하는 공간으로 이동시켜 고정하는 속성.보통 코드를 작성하면 위에서 아래 순서대로 적히는데, 이 순서를 무시해야할 때 사용. ex) 팝업창: position을 따로 설정해두지 않았을 때 고정으로 적용되는 속성. ➰ 기본적으로 적용되어 있는 것!:

![](https://images.v

미디어 쿼리: css만 변경해 모바일과 웹을 구분하는 것.모바일일 때는 모바일용, PC일 때는 PC용 css에서 바꾼다.❓ 구분 방법❗ 웹 브라우저의 가로 크기, 뷰포트의 크기를 통해 일정 수 이상 작으면 모바일, 일정 픽셀보다 크면 PC로 구분한다. ➰ F12 콘솔

대충 정리해보기!일단 자바스크립트는 우리는 구현하지 않을 것!svg: 보통 사진의 확장자는 png나 jpg인데, 이건 픽셀들로 이루어져 있어 확대할 경우 깨지게 된다. 하지만 선과 면을 수학적으로 정의해 해상도를 무한대로 만들면 확대를 해도 깨지지가 않는다. 그게 바로

인스타그램 페이지 레이아웃만 잡기➰ 여백을 없애기 위해 body의 margin을 0으로 둔다. ➰ 헤더부분➰ 높이 54px, 배경을 빨간색으로 구분!: container 안에 content 부분과 aside 부분을 가로로 배치해야 하기 때문에 display: flex로

nav 태그 채우기nav: 로고, 검색 창, 아이콘들로 구성!➰ display: flex로 배열을 자유롭게 만들었다.➰ 배경을 다시 흰색으로 만들었다.➰ align-items: center로 nav 전체를 세로로 가운데 정렬!➰ padding을 위아래는 0, 왼쪽 오른

➕ 기존에 구현했던 것은 추가된 것만 적음.➰ 인스타그램 페이지를 보면, 브라우저 크기가 어느 정도로 커지며 nav 크기도 어느 정도까지만 커지고 크기를 유지한다. 그것을 구현하기 위해 nav의 max-width를 1000px로 두었다.➰ 그러면 웹 페이지가 1000p

➰ class="faccount"는 친구 추천 겸 본인 프로필 소개 부분➰ class="img"는 프로필 사진 부분➰ 그 옆에 계정 이름과 설명 부분➰ 제일 오른쪽에 팔로우 버튼➰ 그 아래부터 친구추천 부분. 구조는 똑같음!➰ 마지막에 소개말 부분도 추가!➰ class

➰ post-title 부분 만들기!html➰ 첫 번째 div는 프로플 사진 부분.➰ 두 번째 div는 사용자 이름 부분.➰ 세 번재 div는 점점점 아이콘!css➰ display: flex로 가로로 정렬되게 바꿨다.➰ 세로로 가운데에 정렬했다.➰ padding을 1