HTML - html과 html5의 개념과 차이점 (HTML4/HTML5)

HTML이란? HyperText Markup Language의 약자 하이퍼텍스트(HyperText) : 웹 페이지를 다른 페이지로 연결하는 링크 웹을 이루는 가장 기초적인 구성 요소로 웹 콘텐츠의 의미와 구조를 정의할 때 사용 월드 와이드 웹(World Wide Web)의 핵심 마크업 언어 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분할 수 있도록 의미 부여 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알 수 있도록 논리적인 영역으로 구조화 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소(elements)들로 구성 HTML5 HTML의 5번째 버전을 의미 2014선보인 현재 HTML의 최신 버전 단순화된 구문 단순화된 구문과 태그뿐 아니라 깔끔하고 의미론적인 코드 지원 이..

• format_list_bulleted Web/html & css & xml
• · 2023. 2. 18.
• textsms

CSS - 스크롤 체이닝의 개념, 스크롤 체인(모바일 새로고침) 방지법 (overscroll-behavior)

스크롤 체이닝이란? (Scroll Chaining) 기본적으로 모바일 브라우저는 페이지 상단 또는 하단(또는 다른 스크롤 영역)에 도달하면 화면이 흔들리는 "바운스" 효과 또는 페이지 새로고침을 제공하는 경향이 있습니다. 스크롤 콘텐츠 페이지 위에 스크롤 콘텐츠가 있는 경우, 페이지 위에 있는 스크롤 콘텐츠의 경계에 도달하면 기본 페이지가 스크롤되기 시작합니다. 이러한 현상을 스크롤 체인이라고 합니다. 즉, 페이지에 스크롤이 되는 콘텐츠가 두 개 이상일 경우, 하나의 콘텐츠의 스크롤이 마지막에 도달하면 다른 콘텐츠의 스크롤이 스크롤 되는 현상입니다. 이는 주로 모바일에서 스크롤 체이닝을 방지하여 페이지의 새로고침을 막는 용도로도 자주 사용합니다. 스크롤 체이닝, 예시를 통해 이해해보기 예시) 두 개의 박..

• format_list_bulleted Web/html & css & xml
• · 2023. 2. 13.
• textsms

Bootstrap CSS - 홈페이지 디자인 쉽게 하기 (개념, 특징, 사용 방법)

부트스트랩 (Bootstrap) 웹 사이트를 설계하고 구축하기 위한 오픈 소스 프론트엔드 프레임워크 다양한 장치에 일관된 화면을 제공 사용자 친화적인 디자인을 쉽게 만들 수 있는 CSS와 Javascript 제공 특징 반응형 디자인 다양한 화면 크기에 자동으로 조정되는 레이아웃을 만들 수 있음 사전 설계된 구성요소 웹 사이트를 구축하는데 사용되는 구성 요소들을 미리 만들어진 구성 요소를 사용하여 구축 시간 절약 됨 일관된 스타일링 사전 설계된 구성 요소를 사용하면 여러 개발자가 작업하여도 웹 사이트의 모양과 느낌이 일관되게 유지 됨 사용자 정의 기능 프로젝트의 특정 요구 사항에 맞게 사전 설계된 구성 요소를 사용하지 않고 사용자가 지정하고 확장 할 수 있음 브라우저 간 호환성 인터넷 익스플로러, 크롬, ..

• format_list_bulleted Web/html & css & xml
• · 2023. 2. 9.
• textsms

CSS - 온라인 폰트 적용, 문자와 숫자에 서로 다른 폰트 적용하기(font-face, unicode-range)

@font-face 웹페이지의 텍스트에 온라인 폰트를 적용 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어짐 문법 (Syntax) : 폰트의 이름으로 지정될 이름 설정 : 원격 폰트 파일의 위치를 URL 값으로 지정하거나 사용자 컴퓨터에 설치된 폰트명을 지정 url('폰트주소') : 온라인 폰트의 위치 지정 loca('폰트명') : 사용자 컴퓨터에 설치된 폰트명 지정 : 폰트의 굵기 글꼴 미적용 : 가나다 ABC abc 123 기본 글꼴 (바탕체) : 가나다 알파벳 (볼드): ABC abc 숫자 (굴림체) : 123 실행 화면 참고 mozilla.org - CSS - @font-face mozilla.org - CSS - Unicode Range

• format_list_bulleted Web/html & css & xml
• · 2023. 2. 6.
• textsms

CSS - 웹 페이지 인쇄 관련 설정 (media screen / media print / break-before&after)

해당 포스팅에서는... 1) 미디어 쿼리를 이용하여 화면과 인쇄시의 화면을 다르게 설정하는 방법 2) 인쇄 내용이 다음 페이지를 넘어갈 경우 해당 내용이 어디에 배치되는지에 대한 설정 을 설명합니다. @media 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용 할 때 사용 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용 @media screen 현재 창에 보여지는 화면의 CSS블록을 적용 @media print 인쇄시 보여지는 화면(미리보기)의 CSS블록을 적용 @media screen / @media print 차이 예시 @media screen : 웹 페이지 화면에서만 CSS 적용하기 코드 a b c d 실행 화면 - 현재 화면 : 스타일 적용 실행 화면 -..

• format_list_bulleted Web/html & css & xml
• · 2023. 1. 30.
• textsms

HTML - nobr 태그 (줄바꿈 방지) + white-space

읽기전에.. 해당 태그는 더이상 사용되지 않습니다. 표준 HTML이 아니므로 사용해서는 안됩니다. 대신 white-space의 속성을 사용하는 것을 권장합니다. 하지만 개념을 알아두고 옛날 문서를 읽는다면 이해하는데에 더욱 도움이 될 수 있습니다. 알아서 손해볼 것은 없으니까요! nobr (Non-Breaking Text) 포함된 텍스트가 여러 줄에 걸쳐 자동으로 줄바꿈되는 것을 방지 text (css) white-space white-space : nowrap; 사용 예시 CSS 영역 설정 27픽셀의 가로폭을 갖는 영역 span { border:1px solid; width:27px; display: block; } HTML 123 456 123 456 123 456 결과 화면

• format_list_bulleted Web/html & css & xml
• · 2023. 1. 18.
• textsms