본문 바로가기

프론트엔드

 (18)
이력서 단계별 연습 🧘🏻‍♂️ 1단계 footer: 배경색(#1e1e1e), 글자색(#919191), 폰트(12px) mainbox: 두께(1px), 직선, 글자색(#ebebeb), 넓이(610px) 🧘🏻‍♂️ 2단계 mainbox: margin(30px), padding(30px) name-text: 폰트(16px), 글자색(#7c7c7c), 폰트두께(bold) footer: padding(20px), 태그 정리 🧘🏻‍♂️ 3단계 그림자 표현하기: 0 1px 20px 0 rgba(0,0,0,0.1) 글씨체(monserrat regular 400) 간격 초기화 h1: 폰트(36px), 폰트두께(bold), italic h2: 폰트(20px), 폰트두께(lighter), 글자색(#282828), 밑줄(1px solid #eb..
HTML/CSS Day 6 section { margin-bottom: 24px; } 👉 각 섹션별 간격을 주어 보기 편하게 한다. .about-me-text { font-size: 10px; line-height: 16px; } 👉 line-height는 font-size의 1.6배가 적당 .title-text { font-size: 11px; font-weight: bold; color: #282828; } .year-text { font-size: 11px; font-weight: bold; color: #282828; } 👉 float: left or right를 해서 한 줄에 배치한다. Experience 작성 Awesome Programming Company 2020 - Now .float-wrap { overflow:..
HTML/CSS Day 5 그림자 표현하기 /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1); 폰트 적용하기 fonts.google.com 접속 montserrat 폰트의 regular 400 찾기 HTML에 활용 or CSS에 @import 사용 @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); * { font-family: 'Montserrat', sans-serif; } 파일 상단에 붙여 넣기 👉 @import : 구글 폰트를 가져옴 👉 * {} : 문서 전체에 적용 body,h1,h2 { mar..
오늘의 연습 #1 어떻게 연습을 할까 고민을 했다. 카페 창 밖에 보이는 구두수선 가게가 마치 HTML로 보였다.. ㅋㅋㅋ 아직 마음에 안들지만.. ㅎㅎ 그래도 많이 늘었음에 만족!! 😎 새로 배운 내용 태그 : inserts a single line break line-height : 줄 간격 👉 line-height: 0.5em; : 1칸 띄어쓰기 (Non-breaking space) 👉 : 2칸 띄어쓰기 👉 : 3칸 띄어쓰기 🤜 부족한 점 한 줄에 한 문장밖에 못 쓴다. 👉 금 이빨 & 전화번호의 글자색&크기 조절 다르게 못함 ㅜㅜ 아래 박스 안에 있는 단어들을 중간 정렬 못함 문을 그리고 싶다!! 간판에 그림 넣기도!!!!!!!!
HTML/CSS Day 4 Margin HTML 박스1 박스2 CSS .box1{ background-color: blue; width: 80px; height: 80px; border: 10px solid black; } .box2{ background-color: red; width: 100px; height: 100px; } margin: top right bottom left; margin: top-bottom left-right; margin: 0 auto; 👉 top-bottom을 0으로, left-right을 자동으로 div.box1 입력하면 .mainbox{ border: 1px solid #ebebeb; width: 610px; text-align: right; margin: 30px auto; padding: 3..
HTML/CSS Day 3 HTML footer 태그를 여러개 추가하면, 위치와 상관없이 같은 CSS가 적용된다. 같은 태그 구분하기 같은 의 경우에 다르게 적용하고 싶다면? 👉 , 태그 사용 class 작은 글씨 또 다른 작은 글씨 .small-font{font-size:10px;} 👉 small-font라는 이름의 class라는 속성을 태그에 줌 👉 중복 사용이 가능함 (동일 이름을 여러 곳에 사용 가능) id 유일한 큰 글씨 #big-font{font-size:50px;} 👉 유일한 값을 사용해 꾸며줌 👉 중복 사용 X 아무 내용 .small-font{ font-size: 10px; } 아무 내용2 #big-font{ font-size: 50px; } Footer 1 - id를 이용해 큰 폰트 Footer 2,3 - clas..
HTML/CSS Day 2 HTML 김멋사 HTML/CSS 개발자 copyright LIKELION. All rights reserved. 이력서를 영어가 아닌 한국어로 language 속성을 ko(한국어)로 변경 meta 태그가 character set을 UTF-8로 사용한다. 👉 사용하지 않을 경우 한글이 깨질 수 있다. 👉 meta 태그는 닫힌 태그 없이 열린 태그만 존재 (스스로 닫는 태그) viewport는 우리가 보는 화면을 의미한다. 👉 모바일 기기로 봤을 때 content가 그 크기에 맞게 표시된다. copyright LIKELION. All rights reserved. 저작권 표시 CSS 연결 1. 탐색기(종이 아이콘)을 열어, CSS 새파일을 만들어 준다. 2. HTML과 CSS 두 파일을 연결 시켜준다. 👉 ..
HTML/CSS Day 1 html의 골격 이 다큐먼트의 타입은 html입니다. 이 안쪽의 문서가 html입니다. 문서에 직접 보이지 않는 부분(내부적으로 갖고 있는 정보)입니다. e.g. 제목, 저자, 대표 이미지, 검색 키워드 등 문서에 직접 보여지는 부분입니다. e.g. 이력서의 제목, 이력서의 내용 등 안녕하세요 태그 안에 넣으면 브라우저 상단에 보이는 탭의 제목에 나온다. 안에 넣은 정보인 태그는 브라우저에 표시된다.

티스토리툴바