Web Programming (7) 썸네일형 리스트형 CSS Layout - Box Model CSS layout: 각 요소의 위치와 크기를 조정하여 웹 페이지의 디자인을 결정 CSS Box Model 모든 HTML 요소를 사각형 박스로 표현하는 개념 > content, padding, border, margin으로 이루어짐 margin : 이 박스와 다른 요소 사이의 공백, 가장 바깥쪽 영역 border : 콘텐츠와 패팅을 감싸는 테두리 영역 padding : 콘텐츠 주위에 위치하는 공백 영역 contetnt : 콘텐츠가 표시되는 영역 box-sizing 속성 width와 height는 content를 기준으로 하기에 실제 박스 너비와는 차이가 있음 *{ box-sizing: content-box; } 이게 default인 컨텐츠 기준으로 박스 크기가 됨 *{ box-sizing: border-.. Cascade-명시도, 상속 CSS Cascading Style Sheet : 계단식 스타일 시트; 웹 페이지의 디자인과 레이아웃을 구성하는 언어 Specificity 결과적으로 요소에 적용할 CSS 선언을 결정하기 위한 알고리즘 CSS Selector에 가중치를 계산하여 어떤 스타일을 적용할지 결정 동일한 요소에 2개 이상의 CSS 규칙이 있는 경우(스타일이 겹치는 경우) 가장 높은 명시도를 가진 Selecor로 스타일이 적용됨 Cascade 명시도가 높은 순서 1. Importance !important 2. Inline 스타일 권장하지 않지만, 우선 순위는 높음 3. 선택자 id > class > 요소 4. 소스 코드 선언 순서 같은 태그의 CSS 규칙이면 마지막으로 선택 class 선택에 2개를 넣을 때는 순서가 필요없음 (.. JavaScript 기본 문법 동적 타이핑 변수를 선언할 때 데이터 타입을 미리 지정하지 않는다. 즉 변수에 할당된 값의 타입에 의해 동적으로 타입이 결정된다. 문 세미콜론(;)으로 끝나야 한다. 블록 유효범위를 생성하지 않는다. > 함수 단위의 유효범위만이 생성된다. 객체 객체 기반의 스크립트 언어이며 javascript를 이루고 있는 거의 모든 것이 객체이다. 키와 값으로 구성된 프로퍼티의 집합이다. 프로퍼티 값으로 함수를 사용할 수 있는데, 이를 메소드라 부른다. 객체지향의 상속을 구현하기 위해 "프로토타입"이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 데이터 타입 하나의 숫자 타입만 존재한다. 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다. 원시 타입은 6가지가 있다. number string boolea.. Form tag Form 사용자가 입력한 데이터를 수집하며 입력 양식 태그를 포함할 수 있음 action : form data가 전송될 URL method : form data 전달 방식 input : 사용자로부터 데이터를 입력받는 곳 value : 표시되는 글 내용 input tag : 다양한 type 어트리뷰트가 옴 select tag : 복수개의 list에서 복수개의 item을 선택할 때 사용 textarea : text 공간이 생겨, 글자를 입력할 수 있음 button : 클릭할 수 있는 버튼이 생김 (cf 과 유사하지만 text나 image 같은 콘텐츠를 사용하지 못 함) 참고 : https://poiemaweb.com/ 여러 가지의 표현 태그 하이퍼링크 href 어트리뷰트에 링크를 넣어 하이퍼링크를 활성화 시킨다. - 절대, 상대 URL - 페이지 내의 특정 id로의 링크 (ex href="#top" ; 맨 위로 가기) target 어트리뷰트에서는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다. - _self : 현재 윈도우에서 오픈 (default) - _blank : 새로운 윈도우에서 오픈 ; 보안이 취약할 수 있어 rel="noopener noreferrer"를 추가 권장 List 형식 표현 목록 안의 각 item은 로 표현 ● : 로 표현 1,2,3 : 로 표현 , 을 통해 item 번호도 정할 수 있음 중첩된 예시는 다음과 같다. 테이블 형식 표현 미디어 이미지 : tag 오디오 : tag 비디오 : tag - src : .. Semantic 및 Tag 크롤링 웹사이트의 정보를 수집하는 것을 뜻한다. 검색할 키워드에 대응하는 인덱스를 미리 만들어 검색을 용이하게 한다. 인덱스를 생성할 때 사용되는 정보는 웹사이트의 HTML 코드이다. 이 때 해석하는 것이 시맨틱 요소(Semantic element)이다. HTML 코드 내에서 h1 요소 내의 콘텐츠가 중요한 의미를 담고 있다. 즉, 시멘틱 태그는 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 웹 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 정리되지 않은 데이터 집합인 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 만드는 것이 목표이다. 문서 형식 정의 tag (Document Type Definition, DTD) tag 라 하며, 출력할 웹 페이지의 형식을 브.. HTML5 기본 문법 HTML의 정의 HTML(HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. - 마크업 언어: 태그 등을 이용하여 문서나 데이터의 구조를 표현하는 언어이다. HTML5 문서의 형식 및 실행 로 시작한다. 실제 HTML document는 , 사이에 기술한다. 사이에는 metadata, title 등을 적으며, 브라우저에 표시되지 않는다. 모든 출력 요소는 ,에 표시된다. 이를 VS Code로 실행을 해보자. HTML5의 기본 문법 요소 start tag, end tag 그리고 태그 사이에 위치한 content로 구성된다. HTML document는 이러한 요소들의 집합이다. 를 안 쓰고 바로 요소 이름을 바로 적어도 자동완성이 됨(VS code에서) 요소의 중첩 요.. 이전 1 다음
