줌인

*예제 코드1 (스스로 해석 해보기) .welcome-header{ margin-top:57px; text-align: center; display: flex; flex-direction: column; align-items: center; font-weight: 800; } .welcome-header__title { margin-bottom:18px; } .welcome-header__text { margin-bottom:57px; width: 50%; opacity: 0.7;} 1. margin : white 화면 공백 자체의 가장 큰 가장자리 2. align -items:center; > 가장자리에 오는 이유는 'flex-direction' 3. display : flex; 를 사용하는 이유 > ..

*CSS Box model (contents, padding, border, margin) 1) Margin : 경계선 외 여백 2) Border : 경계선, Box model의 테두리 3) Padding : 경계선과 내용 안의 여백 4) Contents : 내용 *border : 박스 - solid : 단선 - dotted : 점선 - dashed : 절취선 - double : 이중선

**코드 쓸 때 ;랑 /> 잊지 말기 HTML *연습코드 (1) DOCTYPE html> KAKAO TALK No service 18:43 11% Welcome to KakaoTalk If you have a Kakao Account, log in with your email or phone number. Find Kakao Account or Password - 정형화되지 않고 깔끔하지 않음 name id class - form 컨트롤 요소의 값을 서버로 전송하기 위해 필요한 속성 - jsp등 외부로 값을 던질 때 사용 - 고유값 사용 - class보다 우선값으로 적용 - 로고, 상단메뉴, 하단 등 스타일 정의 - 블로그의 구조적인 꾸밈을 설명 ex) 카카오톡 채팅 화면 ⇒ 자바스크립트에서 html 태..

*link:css > HTML파일과 CSS파일 연동 [아이콘을 가져오는 방법] 1) 직접 아이콘을 구하는 방법 2) 직접 이미지를 만들고/추출 or svg 파일 가져오기(픽셀이 없는 이미지 파일 형식_수학:좌표으로 구성되어 있음) > (svg) heroicons > (svg) font awesome_code kit를 적용해야 함 > (폰트) google forms : import 추출 시, 맨 위에 @import url() body{font-fmaily: } https://fonts.google.com/ [Script] - 항상 마지막에 작성, 태그 닫기 전 == 코드 == 1) .class : 전체적인 틀을 잡아주고 2) .class__sth : 세부적인 틀을 잡아주는 것 3) margin : 상하 좌..

*참고 링크 : https://css-tricks.com/bem-101/ BEM 101 | CSS-Tricks The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-Tricks staff. Joe wanted to do a post about BEM, which we css-tricks.com *참고 1) __ : 정보, 해당 속성 내 어떤 정볼르 담는지를 설명 2) -- : modifier(수식어), 어떤 방식으로 만드는지를 설명 *해석 1) class : 버튼, 버튼은 파랑색이고, 버튼이 크다 ex) big, blue 2) 내부적으로 : 가격을 적고, 텍스트도 적는다 ex) t..

*, 코드 입력 *도출된 화면 - 차이도 없고 띄어쓰기도 되어있지 않음, 두 가지의 차이점을 알 수 없다. 그러면 어떤 방식을 사용해야 차이를 알 수 있을까? 색깔(CSS)를 넣으면 그 차이를 알 수 있다. *, 에 color 적용 *도출된 화면 - : block (전체 한칸, 라인의 요소를 모두 포함하고 있음) - : inline (요소 하나 하나, 요소 한 가지에 집중되는 것) *띄어쓰기를 위해_ 코드 적용시 - 띄어쓰기가 적용된 것을 확인할 수 있음

*section요소 하기 그림 참고 *Exmaple : korea times 머릿말 영역 + 로고를 포함하고 있는 영역 웹 사이트에서 많이 클릭하는 영역, 메인, 대분류, 공통바 etc.. - 메인 메뉴들을 담아내는 영역 ex) 길 안내와 같다고하여 Nav 2개 이상 존재하면 안됨, 웹 사이트의 콘텐츠가 모두 담겨 있는 영역 영역 구분 독립적인 글, 이미지, 기사 etc.. 사이트 한 쪽 사이드 콘텐츠 및 측면에 광고를 담아내는 영역 *Example : 사람인 머릿말 영역 웹 사이트에서 많이 클릭하는 영역, 메인, 대분류, 공통바 etc..> 문서 구조에서 가장 큰 영역의 콘텐츠 꼬릿말 영역

태그의 의미는 컴퓨터에게 전달하는 메세지이다. 의미있는 태그를 사용하자 https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진 (en-US), 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이 developer.mozilla.org #HTML 태그# - p : 문단구분, 띄어쓰기를 코드로 작성해도 반영 x - pre : 띄어쓰기를 코드로 작성해도 반영O - abbs : 준말 - code : 나의 문서 표기 - 코딩에 사용하는 프로그램 문자체 -..

Tag를 전부 외우고 기억할 필요는 없다. 다만, 작동 원리를 이해하고 실행한 코드는 닫아라 .. : big head number .. : small head number .. : 무작위 배열 .. .. : 순번 배열 * HTML document 구성요소 : 기본 구성 .. : 보이지 않는 태그, 사이트에 부가적인 정보를 head tag 작성 .. : 브라우저 탭에서 보이는 페이지 제목 .. : 페이지 내 콘텐츠 내용 [참고 사이트 : example] https://www.koreatimes.co.kr/www2/index.asp?ref] The Korea Times Get the latest on what's happening in Korea from the nation’s top English-lang..