@안김 @안김

뷰포트 Viewport 웹 페이지에서 사용자가 볼 수 있는 영역 모바일 기기 화면에서 실제 내용이 표시되는 영역 태블릿 PC 스마트폰 이전에는 웹페이지가 PC 화면 전용으로 디자인되었으며 웹페이지는 고정된 디자인과 크기를 갖는 것이 일반적이었다. 태블릿 PC 스마트폰 사용이 늘어나면서 고정 크기 웹페이지가 화면에 맞지 않으면서 이 문제를 해결하기 위한 것이 뷰포트. 화면에 맞추어 축소 확대 가능한 반응형 웹사이트를 만들기 위해서는 뷰포트 메타 태그를 사용하는 것부터 시작한다. 뷰포트 설정 태그 사이 태그에 작성한다. 모바일 기기에서 렌더링 되는 영역 뷰포트의 크기 조절 줌 레벨 조정 가장 많이 사용하는 기본 설정 모바일 기기 화면 너비에 맞추고 초기 화면 비율을 1로 지정해서 줌을 하지 않는다. widt..

Visual Studio Code 마이크로 소프트사에서 개발한 소스 코드 편집기 마이크로소프트 윈도우, macOS, 리눅스에서 사용할 수 있는 가볍고 강력한 소스 코드 편집기이다. 비주얼 스튜디오 코드 무료 다운로드 받기 ▶︎ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.vis..

반응형 웹 디자인 Responsive Web Design (RWD) 웹사이트는 데스크톱, 태블릿PC, 스마트폰과 같은 다양한 기기에서 사용하여 볼 수 있다. 웹페이지는 기기에 관계없이 보기 좋고 사용하기 쉬워야 하며 모든 내용을 기기에 맞춰서 조정해서 보기 좋게 만들어야 한다. 반응형 웹 디자인은 하나의 웹사이트의 내용을 그대로 유지하면서 PC, 태블릿 PC, 스마트폰 다양한 화면의 크기에 맞게 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고 하나의 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다. HTML과 CSS에서만 사용하며 프로그램이나 자바스크립트가 아니다. 🎈 반응형 웹사이트 장점 하나의 웹 사이트로 PC, 모바일 등 모든 디바..

단순하게 굵은 텍스트 표시 더욱 창조적으로 생각하고 싶은가? 더 큰 방, 옥상 테라스, 고가의 구조물이 있는 건물로 가라. 특정 패턴을 떠올리게 하는 현재와 관계된 것, 일상적인 일을 하는 장소에서 나와라. ▼ 더욱 창조적으로 생각하고 싶은가? css 설정 b { font-weight: bold; } 강조, 중요한(주의사항, 경고 등) 텍스트를 굵게 표시한다 더욱 창조적으로 생각하고 싶은가? 더 큰 방, 옥상 테라스, 고가의 구조물이 있는 건물로 가라. 특정 패턴을 떠올리게 하는 현재와 관계된 것, 일상적인 일을 하는 장소에서 나와라. ▼ 더 큰 방, 옥상 테라스, 고가의 구조물이 있는 건물로 가라. 특정 패턴을 떠올리게 하는 현재와 관계된 것, 일상적인 일을 하는 장소에서 나와라. css 설정 stro..

~ heading의 줄임말 숫자가 클수록 텍스트 크기가 작다. 제일 큰 제목 , 한 페이지에 하나만 사용하기 제목 1 제목 2 제목 3 제목 4 제목 5 제목 6

paragraph 문단 구분하는 태그 텍스트 텍스트 break 텍스트 줄 바꾸기 하나의 줄 바꿈 주소 시를 쓸 때 유용하다 닫는 태그는 없다. ex) 더욱 창조적으로 생각하고 싶은가? 더 큰 방, 옥상 테라스, 고가의 구조물이 있는 건물로 가라. 특정 패턴을 떠올리게 하는 현재와 관계된 것, 일상적인 일을 하는 장소에서 나와라. ▼ 더욱 창조적으로 생각하고 싶은가? 더 큰 방, 옥상 테라스, 고가의 구조물이 있는 건물로 가라. 특정 패턴을 떠올리게 하는 현재와 관계된 것, 일상적인 일을 하는 장소에서 나와라.

웹 문서의 본문 본문의 제목, 단락, 이미지, 하이퍼링크, 표, 목록 같은 html문서의 모든 내용을 포함한다. 하나의 태그만 존재한다. ATOMIC

ATOMIC html 문서에 대한 데이터 정보 에 항상 들어간다 문자 집한, 페이지 설명, 키워드, 문서 작성자, 뷰포트 설정을 지정 웹 페이지에 표시되지 않는다 웹 서버는 영어 기본 영어 이외의 문자를 표시하기 위해 utf-8이라는 문자 세트를 사용한다 viewport 뷰포트 모바일 기기에 제대로 표시할 수 있도록 한다. 페이지의 크기를 조정 제어한다. width=device-width 모바일 기기 화면 너비에 따르도록 페이지 너비 설정한다. initial-scale=1.0 브라우저에서 페이지를 처음 로드할 때 확대 / 축소를 설정한다. 인터넷 익스플로러 브라우저 고려하기 현재 웹 문서를 최신 표준 모드로 해석하라고 정의 검색 엔진용 키워드 정의 웹 페이지에 대한 설명을 정의 웹 페이지 작성자를 정의

html 문서에 대한 정보 제공 태그, 실제로 웹문서에는 표시되지 않는다. 웹문서의 제목, 외부 파일 링크, 스타일, 스트립트 및 기타 메타 정보를 정의한다. ATOMIC 문서 제목이며 텍스트 전용이다 브라우저의 제목 표시 줄 페이지 탭에 표시된다. 즐겨찾기 추가할 때 페이지 제목으로 제공 검색 엔진 결과에 페이지 제목을 표시한다. 모든 html문서에 필요하다. 검색 엔진 최적화에 매우 중요, 검색 엔진 알고리즘에서 검색 결과에 페이지를 나열 할 때 순서를 결정하는데 사용된다. 검색 엔진은 제목의 약 50~60자 표시하며 제목을 최대한 정확하고 의미있게 만들기 제목은 html문서에 하나의 제목을 가진다.

웹 문서의 시작과 끝을 알린다 ATOMIC [형용사] 원자의 1. 극도로 적은 양, 더 이상 줄일 수 없는 가장 작은 하나의 요소 2. 막대한 양의 힘을 내는 근원 HABIT [명사] 습관 규칙적으로 수행하는 일상적인 행위. 특정 상황에 대해 자동적으로 행하는 반응

HTML 문서의 약속된 표기법를 '태그' (Tag) 라고 한다. 태그는 웹 문서를 표시하는 언어 구분 여는 태그 닫는 태그 정확히 입력한다 ~ 소문자 사용 권장 Tab키로 적당히 들여쓰기 한다 태그는 속성과 사용한다 태그 안에 태그를 포함할 수 있다.

HTML5 기본 구조 ATOMIC [형용사] 원자의 1. 극도로 적은 양, 더 이상 줄일 수 없는 가장 작은 하나의 요소 2. 막대한 양의 힘을 내는 근원 HABIT [명사] 습관 규칙적으로 수행하는 일상적인 행위. 특정 상황에 대해 자동적으로 행하는 반응