Semantic HTML Tag and Web Accessibility 웹표준이란? 웹표준은 인터넷에서 사용되는 웹사이트를 제작하는 방법에 대한 약속 또는 규약이다. 이 규약은 전세계에서 권위있는 W3C(World Wide Web Consortium)에서 제정되었으며, 웹사이트를 만들 때 일관성 있게 작성할 수 있도록 지침을 제공해준다. 웹표준은 왜 필요할까? 웹표준을 사용하면 웹사이트가 여러 플랫폼에서 일관되게 표시된다. 브라우저마다 ( chrome, IE, firefox, opera 등 ) 자체적으로 해석하는 방식이 다르기 때문에, 웹표준을 사용하지 않으면 같은 웹사이트라도 브라우저마다 다르게 보일 수 있다. (이래서 많은 프론트엔드 개발자들이 웹표준 웹표준 거리는거다) 또한, 웹표준을 사용하면 검색..

position : absolute 와 position : relative 의 차이점을 이해하는 데 적지 않은 시간을 보낸 적이 있었다. 누군가에게는 도움이 되기를 바라며 그림으로 차이점을 설명해보겠다. 먼저 position 속성을 지정하지 않을 때, position의 기본 동작을 알아야 한다. position: static position을 따로 선언해두지 않으면 기본값으로 적용된다. 기본적으로 흐름의 현재 위치를 기준으로 요소를 배치한다. top, right, bottom, left, z-index는 적용되지 않는다. position: relative 레이아웃을 변경하지 않고 현재 자신의 위치를 기준으로 요소를 배치한다. position: absolute 가장 가까운 위치에 있는 부모 요소 위치를 기..

** 이 글에서는 렌더링 엔진이 작동하는 방식과 사용자 화면에 웹 페이지를 표시하는 방법을 알아볼거다. * 먼저 설명하는 데에 쓰일 용어들의 의미를 알아보도록 하자. 파싱 (parsing) 이란? 컴퓨터 프로그래밍에서 말 그대로 "구문 분석" 을 의미한다. 즉, 컴퓨터가 이해할 수 있는 형태로 입력된 문서나 데이터를 분석하여 그 의미를 이해하고 처리하기 위한 작업이다. 웹 프로그래밍에서는 HTML, XML 등의 문서를 파싱하여 웹 페이지를 구성하거나 데이터를 추출하는 데에 사용된다. DOM (Document Object Model) 이란? HTML, XML 등의 문서를 파싱하여 웹 페이지를 구성하거나 데이터를 추출하는 데에 사용되는 API이다. DOM은 문서를 트리 구조로 변환하여 각 요소를 노드로 표현..

1. float 속성에 대해서 깊게 알아보자 float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 프로퍼티를 사용해야 한다. float는 말 그대로 ‘뜨다’ 라는 말임. 애초에 이미지에 텍스트를 둘러싸게 만들려는 목표로 나온 속성이 float 속성임. ‘떠 있는 요소’ 라고 생각하면 편함. * float 속성은 전체 넓이가 지정되어 있지 않으면 계속 옆으로 붙고 더이상 자리가 없으면 아래로 자리잡게 됨. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이..

컴퓨터 공학에는 논리 회로 라는게 있다. 전기를 이용한 신호의 입력과 출력을 다루는 회로인데, 이 회로에서는 논리게이트 라는걸 사용해서 입력을 처리하고 출력을 생성한다. 논리게이트에는 AND, OR, NOT, XOR 등이 있는데, 이러한 논리게이트를 조합해서 다양한 논리회로를 구성할 수 있다. 논리회로는 컴퓨터 등 다양한 전자장치에서 사용되며, 이를 통해 다양한 계산과 처리를 수행할 수 있게 해준다고 한다. 1. AND 회로는 두 입력이 모두 1인 경우에만 1을 출력하고, 그 외의 경우에는 0을 출력하는 논리게이트임. AND 회로는 논리곱 연산을 수행한다고 함. 2. OR 회로는 두 입력 중 하나 이상이 1인 경우에 1을 출력하고, 그 외의 경우에는 0을 출력하는 논리게이트임. OR 회로는 논리합 연산을..

1순위: !important ( 속성값 바로 뒤에 넣음 / 최상위 명령어임 / 근데 가급적이면 안쓰는게 좋은 듯.) - HTML => 서울 - CSS => .CCC{ color : blue !important; } 2순위: inline 스타일 속성 (태그에 style 먹여서 inline 으로 작성) - HTML => 서울 3순위: 아이디 - HTML => 서울 - CSS => #BB {color : blue} 4순위: 클래스 - HTML => 서울 - CSS => .AAA {color : blue} 5순위: tag 선택자 (tag를 그대로 선택자로 사용하는것. ) - 예를 들어서, span { color : blue } 이런식으로 CSS 파일에 tag 선택자를 선언해놓는 것. 6순위: 전체 선택자 (모든..

매번 VSC에서 html 파일에서 느낌표(!)를 누르고 tab키를 누르면 html 기본 코드가 자동완성 됐다. 항상 당연하게 쓰다가 '근데 이걸 왜 저렇게 써야하고, 왜 필요한걸까?' 라는 궁금증이 생겨 찾아보게 됐다. 이번 글에서는 맨 상단에 위치한 DOCTYPE의 의미는 무엇이며, 왜 써야하는지를 알아보자. HTML 문서의 첫 줄인 HTML(Hypertext Markup Language) 선언이며, 사용 중인 HTML 버전과 웹 페이지 표시 방법을 웹 브라우저에 알려주는 것이다. 웹 브라우저가 HTML 문서를 받으면 DOCTYPE 선언을 확인하여 사용 중인 HTML 버전을 확인한다. HTML 버전마다 규칙과 구문이 다르므로, 버전마다 적용되는 태그와 적용되지 않는 태그가 있다. 따라서, 웹 페이지가 ..