비전공자 개발일기

a 태그 흉내내기 코드 a 태그 흉내내기

HTML: Hyper Text(문서를 서로 연결해주는 링크) Markup Language 시멘틱(의미가 통하는) 태그를 사용하여 만든 웹 문서 시멘틱 태그가 필요한 이유 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목, 메뉴, 본문 내용 등 알 수 있음 문서 구조가 정확히 나눠지므로 PC, 스마트기기 등 다양한 화면에서 웹 문서를 표현하기 쉬움 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있음 시멘틱 태그의 종류 : 헤더 영역을 나타냄, 검색창이나 사이트 메뉴를 삽입 : 내비게이션 영역, 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크 : 핵심 콘텐츠, 웹 문서마다 다르게 보여주는 내용으로 구성, 1회만 사용 권장 : 독립적인 콘텐츠, 웹에서 ..

IN'O Portfolio Make Hardware Soft IN'O is a hanger-type bluetooth speaker that does not merely focus on its audio features. It naturally blends into your life through lean UX and minimal design. VIEW MORE * { box-sizing: border-box; } body { margin: 0; font-family: 'Roboto', sans-serif; } .navbar { background-color: #353535; width: 100%; height: 60px; line-height: 60px; padding-left: 30px; paddi..

HTML CSS body { margin: 0; } .div1 { background-color: #ff0000; width: 100%; height: 60px; } .div2 { background-color: #ffa500; width: 100%; height: 350px; } .div3 { background-color: #ffff00; width: 100%; height: 320px; } .div4 { background-color: #008000; width: 100%; height: 385px; } .div5 { background-color: #0000ff; width: 100%; height: 200px; } .div6 { background-color: #4b0082; width: 100..

작업 환경 구성 (VS code) Npm init -y Npm i-D parcel-bundler Package.json -> script 수정 ("dev" : "parcel index.html", "build": "parcel build index.html") SCSS 연결 npm i -d sass SCSS => CSS 변환 확인 사이트 https://www.sassmeister.com/ SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com SCSS에서 나누기(몫)을 할 때, 괄호 사용 ex) margin: (30px ..

NPM Project - Bootstatp 1. 준비 (NPM 준비 후) 터미널에서 npm install bootstrap@next 2. SCSS 생성(폴더 및 파일) 3. Javascript 연동 연동 확인

CSS 속성(Properties) 박스 모델 글꼴 & 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 1. 박스 모델( 내부 & 외부 여백, 가로 & 세로 등) width / height : 요소의 가로 / 세로 너비 기본값(요소에 이미 들어있는 속성의 값): auto(브라우저가 너비를 계산) 단위: px, em, vw 등 span(인라인 요소) vs div(블록 요소) span(인라인 요소) div(블록 요소) 가로 콘텐츠의 크기만큼 자동으로 줄어듬 부모 요소의 크기만큼 자동으로 늘어남 세로 콘텐츠의 크기만큼 자동으로 줄어듬 콘텐츠의 크기만큼 자동으로 줄어듬 max-width / max-height: 요소가 커질 수 있는 최대 가로 / 세로 너비 기본값: none(최대 너비 ..

선택자 { 속성1: 값1; 속성2: 값2; /* 주석 */ ... } 선택자: 스타일을 적용할 대상 속성: 스타일의 종류 값: 스타일의 값 선언 방식 내장 방식: 의 내용으로 스타일을 작성(HTML) 인라인방식: 요소의 style 속성에 직접 스타일을 작성(선택자 없음, HTML) 링크방식:로 외부 css문서를 가져와서 연결하는 방식(병렬 방식) @import방식: css의 @import규칙으로 css문서 안에서 또 다른 css 문서를 가져와서 연결하는 방식(직렬 방식) @import url("") div { .... } CSS 선택자 기본선택자 전체 선택자: 모든 요소를 선택(*) 태그 선택자: 태그를 선택 (태그명) 클래스 선택자: (.class명) 아이디 선택자: (#아이디명) 복합선택자 일치 선택..