본문 바로가기

Room 103. Front-end

 (18)
뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (9) - 레이아웃 HTML5, CSS 강의 35강 ~ 45강 학습 중 메모 35강, 레이아웃 블록 #1. 콘텐츠 블록 & 레이아웃 블록 스타일 - 스타일을 입힐 때, 크게 2가지의 스타일로 나눠볼 수 있습니다. - 컨텐트 블록과 컨텐트들을 배치하는 스타일. - 가구들로 방을 꾸미는 것! 36강, 제일 큰 방(Box) 레이아웃 생성 박스 영역 내 컨텐트의 크기를 함께 고려해야 함! 37강, reset 파일 생성 / 개발자 관리 도구 38강, 색상 값 39강, 두 번째방 설정하기 (박스 정렬과 최소 높이) width/height, inherit / 100% margin-left/right 의 auto 값 주어 가운데 유지하는 방법 40강, 세 번째 방 설정 블록 박스의 레이아웃 방식 - 블록(Block) 형식의 기본 배치방식..
뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (8) - 스타일 링크 HTML5, CSS 강의 33강 ~ 34강 학습 중 메모 33강, 스타일 링크하기 34강, 스타일 리셋/평준화/현대화 #1. reset.css : style.css 파일을 만들었습니다. 무엇부터 해야 할까요? html 은 기본 스타일이 있습니다. 그런데 마음에 들지 않아 몽땅 새로 디자인하여 사용하고 싶은 경우, html 의 스타일을 모두 없애버리는 reset.css 사용하는 방식을 사용할 수 있습니다. #2. normalize.css : 또는 normalize.css 스타일을 사용하여, 브라우저마다 기본 스타일이 다르기 때문에 브라우저의 기본스타일, 디자인을 모두 맞춰주는, 평준화 시켜주는 normalize.css 를 사용할 것인지 선택하면 됩니다. 우리는 이 두 가지 중 선택하면 됩니다. 요즘은 re..
뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (7) - Selectors 우선 순위 HTML5, CSS 강의 32강 학습 중 메모 32강 Selectors 우선 순위 한 태그에 클래스/아이디/태그 스타일이 겹칠 경우 어떤 스타일이 적용 될까? 적용 범위가 넓은 셀렉터일 경우 우선순위가 낮습니다! ID > Class > Tag명 같은 셀렉터면서 스타일이 다를 경우는 어떤 스타일이 적용 될까? 가장 나중의 스타일이 덮어쓰게 됩니다! 아래 예제는 2 > 3 > 1 > 4 순으로 우선순위가 높습니다! 아래 예제는 1 > 2 > 3 순으로 우선순위가 높습니다!
뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (6) - 스타일과 선택자 HTML5, CSS 강의 27강 ~ 31강 학습 중 메모 27강 스타일 기초 개념 CSS(Cascading Style Sheet) 컨텐트에 스타일 입히는 매우 기본적인 예시. 스타일의 종류는 굉장히 많지만, 특정 기준으로 색 변경, 위치 변경 등으로 트리구조로 뻗어나갑니다. 모질라 CSS 레퍼런스에서 종류 참고 가능! 28강 선택자 특정 태그에 스타일을 부여할 때, 태그 속 style을 직접 정의하는 방식도 있지만, 그렇게 한다면 중복 코드가 발생하기 때문에 선택자를 활용합니다. Selector 태그명 : 점이나 #이 없을 경우 태그명으로 인식해서 태그를 찾게 됩니다. 아이디 : 태그에 이름이라는 녀석을 부여하여 특정 스타일을 부여하는 방식. #name1 { color:red } 이런 방식! 클래스 : ..
뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (5) - 블록/인라인 태그 HTML5, CSS 강의 24강 ~ 26강 학습 중 메모 24강 HTML5의 섹션 태그 아웃라인 영역마다 제목 h1,h2,h3 을 하기보다 섹션을 활용하여 모두 h1 을 쓰는 것이 편할 것 같다! 25강 블록 태그와 인라인 태그 기본적인 블록 태그들 블록태그는 컨텐트와 상관 없이 자기 스스로 영역을 가지고 있습니다. 높이는 컨텐트의 높이를 따라갑니다. 너비는 한 row 를 다 쓰게 됩니다. 아래와 같이 div 블록 스타일 h1 제목 스타일 블록 : 위 아래 마진 약간 있음 ul 목록 스타일 블록 : 위 아래와 레프트 마진이 있음. 인라인 태그의 특징 중 하나는 자신이 잡는 영역이 콘텐트가 잡는 영역과 밀접하다 즉, 너비가 한 층을 잡지 않고 콘텐트 영역의 크기가 자신의 크기가 됨! 26강 인라인 태그의 ..
뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (4) HTML5, CSS 강의 17강 ~ 22강 학습 중 메모 17강 웹 문서 작성 1단계 - 콘텐츠 작성하기 18강 콘텐츠의 블록 작성하기 #1 19강 콘텐츠의 블록 작성하기 #2 제목? 목록? 문장? 표? 폼? 위에 따라 태그를 선택하며 아니라면? 추천. 20강 문서의 아웃라인 잡기 Chrome Web Store - HTML5 Outliner 를 통해 윤곽 확인 가능 21강 아웃라인 영역 만들기 22강 영역을 위한 시멘틱 태그 HTML4 까지만 해도 헤더/메인/푸터에 대한 통일감, 구분 태그의 개념이 없었습니다. 하지만 21강에서 헤더 영역, aside 영역, 메인 영역, 푸터 영역을 분할하면서 각 영역에 통일감을 부여했습니다. 모든 태그에는 id라는 속성이 있기 때문에 이를 활용하게 되었고 어느 정도 표..
뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (3) HTML5, CSS 강의 16강 학습 중 메모 16강 HTML5의 탄생배경 HTML과 XHTML 도 있었죠. XHTML 은 HTML 의 상위 버전이 아니라 다른 버전임! XHTML 의 역사적인 이야기. 브라우저를 만드는 여러 회사가 있었습니다. 그 회사들 반면에 표준을 만드는 회사가 있었습니다. 1. W3C : 시맨틱을 지원하는 문서로의 변화. 2. WHATWH : 프로그래밍 플랫폼으로의 변화. 90년대에 표준이라는 것을 이끄는 선두주자인 W3C 멤버쉽 에서, HTML 버전을 관리하다가, HTML 4.0이 나오고 난 뒤, HTML 을 더이상 발전시키지 않고 XML 기반의 XHTML 을 만든다고 발표합니다. 여기서 문제점은, 과거의 호환성을 가져가면 문제가 없는데, 이렇지 않았다는 점입니다. 그래서 XHT..
뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (2) HTML5, CSS 강의 10강 ~ 15강 학습 중 메모 10강 실습환경 준비하기 Visual Studio Code 라는 툴 설치. JavaScript 강의 3/4강을 통해 라이브 서버까지 설치하여 웹 개발 환경 만들기. 웹 문서 스크립트 코드 위 개발을 위해 편집기능이 극대화된 툴이 필요하다! Visual Studio Code (모든 OS 편집 및 디버깅). 편집기가 우선시 된 VSCode. 모듈 중 Live Server 설치. 11강 PC웹과 모바일 웹의 실습순서 안내 어떤 웹을 먼저 만들어야 할까? PC웹 vs 모바일웹 모바일용 웹과 PC용 웹의 양분화... 태블릿 등 여러 디바이스가 더 생겨남... 트래픽이 많은 모바일 웹, 태블릿, ... PC 웹까지. 트래픽에 반응할 수 있게끔 큰 것부터 작은..

티스토리툴바