코딩항해기

HTML 규약 및 관례HTML에는 다양한 규약과 최선의 관례가 존재한다. 이는 웹 페이지의 명확한 구조 및 내용을 정의하고, 간편한 유지 보수가 가능하며, 웹 접근성 및 크로스 브라우징 문제를 최소화할 수 있는 장점이 있다. 문서 형식 선언HTML 문서의 시작 부분에 적절한 문서형식 선언을 추가해야 한다. (HTML5 기준) 문서 구조  유효한 마크업문서는 유효한 마크업을 가져야 하며 W3C Markup Validation Service와 같은 도구를 사용하여 문서를 유효성 검사한다. 의미 있는 태그 사용 / 시맨틱 마크업 HTML5에서는 의미 있는 태그를 사용하여 문서를 정의한다. header, nav, section, article, footer 등의 태그를 활용하여 문서를 의미 있게 구조화한다..

form validation폼에 작성된 데이터가 서버로 전송되기 전 전송할 데이터들이 올바른 포맷으로 잘 입력되었는지 확인하는 과정이다. (=유효성 검증) validation 위치클라이언트 사이드가 좋을까 서버 사이드가 좋을까, 둘 다 장단점이 있으며 속도처리 면에서는 클라이언트가 빠르다. 태그 자체에 검사가 내장되어있어 submit 버튼을 누르기도 전에 에러 메세지로 알릴 수 있기 때문이다.하지만 서버만 가능한 검사 (데이터 비교 등등)도 있으므로 우위를 구분할 수 없다. 보안 측면에서는 둘 다 해야한다는 의견도 있다. (자바스크립트를 알면 쉽게 우회가 가능) 태그에 붙일 수 있는 validation 속성required필수 입력 필드 지정모든 input 타입minlength/maxlength최소/최대 ..

CSS 방법론CSS 방법론은 CSS를 효율적이고 유지보수하기 쉽게 작성하기 위한 일련의 규칙과 가이드라인이다. 대규모 프로젝트에서 CSS를 체계적으로 관리하기 위해 필수적이다. 필요에 따라 여러 방법론을 혼합해 사용한다. CSS 방법론 종류BEM (Block Element Modifier)가장 널리 사용되는 CSS 방법론으로, 클래스 이름을 통해 요소의 구조를 명확히 표현한다./* Block */.card { }/* Element */.card__title { }.card__image { }/* Modifier */.card--featured { }.card__title--large { }/* 실제 사용 예시 */.header { }.header__navigation { }.header__logo { }..

CSS-in-JSCSS-in-JS는 JavaScript를 사용하여 스타일을 컴포넌트에 직접 작성하는 기술이다. 이는 CSS의 전역 네임스페이스 문제를 해결하고, 컴포넌트 기반 개발에 더 적합한 스타일링 방법을 제공한다. Styled-components가장 널리 사용되는 CSS-in-JS 라이브러리다.import styled from 'styled-components';const Button = styled.button` background: ${props => props.primary ? 'palevioletred' : 'white'}; color: ${props => props.primary ? 'white' : 'palevioletred'}; padding: 0.25em 1em; border:..

Tailwind CSSTailwind CSS는 유틸리티 우선(utility-first) 접근 방식의 CSS 프레임워크다. 미리 정의된 클래스들을 조합하여 스타일을 구성하는 방식으로, 보다 빠르고 유연한 웹 개발을 가능하게 한다. 환경 세팅# npm으로 설치npm install -D tailwindcssnpx tailwindcss init# PostCSS 설정module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [],}  핵심개념유틸리티 클래스 제목 제목반응형 디자인 반응형 텍스트 항목 1 항목 2 항목 3상태 변형 버튼 다크 모드 지원 콘텐츠커스텀 설정// tailwind.co..

DOM 소개 - Web API | MDN이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한developer.mozilla.org 문서 객체 모델 DOM (The Document Object Model)DOM은 HTML, xml 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경 할 수 있게 돕는다. 퓁 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 웹 페이지는 문서 중 ..

CSS 변수CSS 변수는 기존의 정적인 CSS 스타일링에서 벗어나 동적이고 유연한 스타일 관리를 가능하게 한다. 장점은 코드의 재사용성과 유지보수성을 크게 향상시킨다는 점이다. 단순히 값을 반복해서 작성하는 대신, 한 곳에서 정의하고 전체 스타일에 적용할 수 있다. 변수를 선언하는 기본 문법은 대시 두 개(--) 로 시작한다. 예를 들어 --main-color: #3498db; 처럼 정의할 수 있다. 이 변수는 var() 함수를 통해 호출할 수 있고 전역 변수는 주로 :root 선택자에서 정의한다. 이는 문서 전체에서 접근 가능한 변수를 만드는 방법이다. 예시:root { --primary-color: #007bff; --secondary-color: #6c757d; --font-size-base:..

레이아웃 및 포지셔닝 속성display요소의 표시 방식block, inline, inline-block, flex, grid, table, inline-table, noneposition요소 위치 지정static, relative, absolute, fixed, stickytop, right, bottom, left요소 위치 조정10px, 50%, autovisibility요소 표시 여부visible, hidden, collapseopacity요소 투명도0 ~ 1z-index요소 쌓임 순서0, 1, -1, auto박스 모델 속성width, height요소 크기200px, 50%, auto, fit-contentmax-width, min-width, max-height, min-height요소 크기 제한5..

캐노니컬 태그 Canonical tagSEO 개선을 위한 중요한 기능 중 하나로 한 페이지가 가리키는 여러 개의 주소가 존재할 때, 검색 엔진에게 어떤 주소가 원본인지 알 수 있도록 사용하는 태그이다. 캐노니컬 태그 필요성파라미터(쿼리스트링)를 사용하거나, 모바일 주소와 같이 여러 주소가 나오게되면 검색엔진 로봇은 어떤 주소가 페이지를 가리키는 좋은 주소인지 알지 못한다. (https://test.com/page=1, http://m.test.com/index.jsp 와 같은 경우 외에도 쿼리스트링만 달라지는 경우에도 검색 엔진은 다른 주소로 인식한다.)  이러한 문제를 해결하는 방법으로 크게 두 가지가 있는데, 검색 엔진이 스스로 어떤 URL이 표준(캐노니컬)인지 판단하도록 하는 방법과 페이지에 표기하..

검색 엔진 최적화 SEO SEO - MDN Web Docs 용어 사전: 웹 용어 정의 | MDNSEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 순위 개선이라고도 합니다.developer.mozilla.org SEO는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정으로 검색 순위 개선이라고도 한다. 검색 엔진은 웹을 크롤링하면서 찾은 컨텐츠의 색인을 생성한다. 검색 결과로 보이는 것이 색인된 컨텐츠이다. 크롤러는 일정한 규칙을 띠르기 때문에 해당 규칙을 따라가면 웹사이트 검색 결과 최상위에 노출될 가능성이 높아지는 것이다. 검색 엔진에 대한 SEO 가이드라인을 제공하긴하지만 대형 검색 엔진의 경우 순위가 공개되지 않으므로 공식 지침에 경험, 논문과 특..