줌인

▶ HTML / CSS 기본 용어 학습하기 좋은 사이트https://www.w3schools.com/ W3Schools Online Web TutorialsW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com※ 모르는 키워드 / 용어 등을 탐색하고 학습하기 좋은 사이트 (#감 익히기) [용어 정리]더보기1. element와 tagelement(요소)tag태그와 내용(content..

*예제 코드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..