본문 바로가기

코딩 공부212

[CSS] 박스 모델, 선 박스 모델 HTML의 기본적인 모양을 만드는 속성 가로 너비, 세로 너비, 외부 / 내부 여백으로 HTML을 제어 요소의 가로, 세로 너비 가로 : width 세로 : height 기본값: auto 단위 : px 등 정확한 크기를 명시하고 싶으면 단위를 이용해 가로 / 세로 사이즈를 명시 selector { width: 0px; heught: 0px; } 요소의 최대 너비 max-width, max-height 기본값 : none (최대 너비의 제한이 없다.) 단위 : px 등 selector{ max-width: 400px; max-height: 100px; background-color: beige; } 요소의 최소 너비 min-width, min-height 기본값 : 0 단위 : px 등 sele.. 2022. 9. 8.
CSS관련, 경로 CSS(Casecading Style Sheet) 정보 전달을 위한 html을 꾸며주는 디자이너의 역할(시각적인 표현 담당하며, 태그를 선택하여 디자인하고 배치) selector { property : value; } /* 주석 처리 */ /* 하나의 속성값이 끝나면 세미콜론으로 마침 세미콜론이 없으면, 브라우저가 인식 불가능, 오류 발생 */ CSS 적용 우선 순위 동일 CSS 속성이 중복 사용시, 어떤 CSS 속성을 우선 적용할지 결정하는 방법 !important : 1 억점 inline : 1000점 ID selector : 100점 Class selector : 10점 Tag selector : 1점 CSS의 4가지 선언 방식 내장 방식 링크 인라인 방식 @import 방식 1. 내장 방식 HTM.. 2022. 9. 8.
브라우저관련 웹 브라우저 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램 ※ 렌더링 → 브라우저의 뷰포트에 웹사이트를 출력하는 것 브라우저 엔진 웹 페이지 구성을 위한 HTML, CSS 등 자료 해석하여 사용자 장치에 맞게 변환하는 역할 → 웹 표준에 의거해 프로그래밍되어있어 웹 표준에 맞게 코드를 작성해야 한다. ※ 크로스 브라우징 → 브라우저마다 코드가 정해지지 않아서 생기는 이슈 동작 방식 사용자가 브라우저를 연다 주소창에 페이지 주소를 입력한다. 주소에 맞는 서보로 최초 요청(request) 요청이 들어온 사용자 최초 응답(response)을 기본적인 웹사이트 구조를 담고 있는 HTML 파일로 응답 작성된 HTML 구조에 맞게 css, js 등 서버로 추가 요청 새로.. 2022. 9. 7.
UI와 UX UI (User Interface) 어떠한 제품이나 소프트웨어를 사용하게 되는 사용자가 그에 해당하는 제품과 서비스를 이용할 시 처음 접하게 되는 매개물 UX (User eXperience) 유저의 경험을 의미, 유저가 스마트한 서비스나 제품을 직접 사용하여 느끼는 것 UI, UX의 차이점 UI는 앞서 언급한 것처럼, 시각적으로 보여지는 디자인에 의의, 이용자가 어떤식으로 사용할 때에 편리할지를 계산하여 위치나 구도를 잡고 표현방식을 정하는 것 이고 UX는 좀 더 포괄적으로, 사용자 혹은 이용자가 편리한 경험을 해주게끔 도와주는 것이다. 2022. 9. 7.
웹 표준, 웹 접근성과 웹 호환성 웹 표준 웹 기술을 표준화하기 위한 일련의 단계와 요구사항, 웹에서의 표준은 W3C(World Wide Web Consortium)의 토론을 통해 나온 권고안 효과 1. 웹 접근성의 향상 2. 구조와 표현의 분리 과거에는 html로 구조와 표현까지 모두 아울렀음 3. 호환성 확보 크로스 브라우징에 유리 4. 작업, 유지보수 속도 향상 css의 아이디와 클래스 등을 이용하여 작업 속도가 빨라짐 W3C의 표준화 제정 단계 초안 후보 권고안 제안 권고안 권고안 웹 접근성 장애를 가진 사람이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것 효과 1. 사용자층 확대 글씨 크기 조절, 색상 대비 등을 통해 다양한 사람이 콘텐츠를 무리없이 즐길 수 있음 2. 규정 & 법적 요.. 2022. 9. 7.
시멘틱 태그 시맨틱 태그 (Semantic Tag) 시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이므로 HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공 ※ HTML5 이전에는 구조를 구분하기 위하여 div태그에 id 또는 클래스 등으로 구분하며 구조를 설계했으나 시멘틱태그의 등장으로 인하여 좀더 명시적이면서도 직관적인 구조의 설계가 가능해졌다. 시멘틱태그의 종류 : 머리글, 제목, 헤더 : 본문의 주요 내비게이션(메인 메뉴) 영역, 다른 문서를 링크하는 탐색 영역을 지정 : 본문 내용 이외에 표현하고자 하는 기타 내용 존재시 영역을 지정할 때 사용하거나 서브 메뉴 표시시 사용 : 해당 페이지의 콘텐츠 영역을 지정할 때 사용, 주제 별 콘텐츠 영역 지정 : 독립적인 콘텐츠 항목.. 2022. 9. 7.

티스토리툴바