전체 글144 [코드 컨벤션] 대표적인 코드 컨벤션 규칙 1. 들여쓰기 (Indentation)규칙 : 코드 블록을 들여쓰기하여 계층 구조를 명확히 한다.일반 규칙스페이스 또는 탭을 사용한다.일반적으로는 2개 또는 4개의 스페이스를 사용한다.// 2 spacesfunction example() { if (true) { console.log('Hello'); }} 2. 코드 라인 길이 (Line Length)규칙 : 코드 라인의 길이를 제한하여 가독성을 높인다.일반 규칙보통 80~120자 이내로 제한긴 표현식은 여러 줄로 나누어 작성3. 변수 및 함수 (Line Length)규칙 : 일관된 변수 및 함수 이름을 사용하여 코드의 의도를 명확히 한다.일반 규칙PascalCase(파스칼 케이스) : 첫글자와 이어지는 단어의 첫글자를 대문자로 표기하는 방법Pa.. 2024. 8. 30. [CRS, SRS] HTML과 Data 합치는 관점의 렌더링 1. 서버측 렌더링서버에서 HTML을 생성하고, 클라이언트에게 오나성된 HTML 페이지를 전송하는 방식클라이언트의 요청서버의 처리서버는 요청을 받고, 필요한 데이터를 데이터베이스나 다른 소스에서 가져옵니다.서버에서 HTML 템플릿에 데이터를 삽입하여 완성된 HTML 페이지를 생성합니다.예를 들어, 서버 측 템플릿 엔진(예: EJS, Pug, Handlebars)을 사용하여 데이터를 동적으로 삽입합니다.응답 전송서버는 생성된 HTML 페이지를 클라이언트에게 전송합니다.클라이언트의 렌더링브라우저는 받은 HTML 페이지를 렌더링하여 사용자가 볼 수 있는 페이지를 표시합니다.장점빠른 초기 로딩SEO(Search Engine Optimization) : 검색 엔진 크롤러가 서버에서 제공된 HTML을 쉽게 읽을 .. 2024. 8. 30. [CSS, 함수 Scope] 상대 단위와 절대 단위, 함수 Scope 1. CSS 상대 단위와 절대 단위1) 절대 단위px (픽셀) :화면에서 고정된 크기 단위가장 많이 사용되는 절대 단위예시 : width: 100pxpt (포인트)인쇄 매체에서 주로 사용되는 단위로 1pt는 1/72인치예 : font-size: 12ptcm, mm실제 물리 단위 길이로, 주로 인쇄 매체에서 사용예 : width: 5cmin2.54cm에 해당하는 물리적인 길이 단위예 : width: 5inpc (파이카)1pc는 12pt에 해당예 : width: 1pc2) 상대 단위em부모 요소의 폰트 크기를 기준으로 크기를 결정한다.rem (root em)문서의 루트 요소(`html`)의 폰트 크기를 기준으로 크기를 결정한다.%부모 요소의 크기에 대한 비율로 크기를 결정vm (viewport width)뷰.. 2024. 8. 29. [웹 애니메이션] 웹 애니메이션 기초 1. 웹 애니메이션을 구현하는 4가지 방법사용 예시는 참고 문서를 활용1) CSS transition가장 많이 사용하고, 쉽고 간단한 방식러닝커브가 높지 않아 특별한 지식 없이도 충분히 사용 가능2) CSS animationtransition과 용도가 조금 다르다.여러 효과를 혼합하거나 연쇄적 동작처럼 더 복잡한 인터랙션을 구현할 떄 유용3) SVG animaitionSVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 표현하기 위한 XML 마크업 언어JPEG나 PNG에 비해 다음과 같은 장점이 있음W3C 표준과 호환되기 때문에, HTML 문서에 그래도 사용 가능JPEG, PNG 보다 용량이 작다.확대하더라도 깨짐 없이 선명하다.4) animation APIJS로 애니메이션을 구현.. 2024. 8. 29. 이전 1 2 3 4 5 6 7 ··· 36 다음