전체 글26 CSS Display CSS Display 속성값들의 특징 1. display: inline; - line break가 일어나지 않습니다. - full width를 차지하지 않습니다. - width, height 속성을 적용할 수 없습니다. 2. display: block; - new line에서 시작합니다. 즉, line break가 일어납니다. - full width를 차지합니다. - width, height 속성이 적용 가능합니다. 3. display: inline-block; - inline과 비슷한 특성이지만 width, height 적용이 가능합니다. - 위와 같은 이유로 line break 시키고 싶진 않으나 width나 height등의 속성의 성격은 box를 따라가고 싶을 때 사용합니다. - 주로 inline .. 2023. 5. 9. CSS Box Model CSS Box Model CSS의 모든 것들은 Box(박스)로 이루어져 있고 이를 이해해야 복잡한 레이아웃을 구성할 수 있습니다. 박스는 크게 Block 박스와 Inline 박스 두 종류로 나뉩니다. 이는 해당 박스가 다른 박스와 어떤 관계고 페이지 흐름 속에서 어떠한 특성을 갖는가로 구분합니다. 그리고 Block 박스와 Inline 박스 안에서도 각각 inner display type 과 outer display type 으로 종류를 나눌 수 있습니다. 1. Box의 구분과 그 특징 1-1. Block + outer display type - 요소를 생성하면 line break과 함께 박스가 생성됩니다. - 이 박스에는 width, height 속성을 적용할 수 있습니다. - padding, borde.. 2023. 5. 9. CSS Positioning에 대한 이해 CSS Position 속성 1. static static 속성값은 position 속성의 default 값입니다. 즉, 별다른 컨트롤 없이 문서의 흐름 그대로 배치됩니다. position 속성값은 cascade 되지 않기 때문에 굳이 그 값을 초기화해줄 필요가 없어 거의 쓸 일이 없는 값입니다. 2. relative '자기 자신에게 relative' 하다는 뜻에서 relative라는 값 이름이 붙여졌습니다. top, left, bottom, right 등의 positioning 속성을 따로 설정하지 않으면 배치되는 위치는 static과 다를 바가 없습니다. top, left, bottom, right 등의 positioning 속성에 따라 자신의 원래 위치에서 이동된 위치에 배치됩니다. static으로.. 2023. 4. 11. Float과 Clear에 대한 이해 CSS의 Float과 Clear 속성에 대한 이해 1. Float 속성 float 속성은 원래 뉴스 기사나 잡지 등에서 흔히 볼 수 있는 형태인 글과 사진이 함께 어우러지며 화면에 나타날 수 있도록 하기 위해 고안된 CSS 속성 중에 하나입니다. 요소에 float 속성을 지정하면, 해당 요소가 HTML 문서의 기본적인 흐름에서 벗어나 3차원 공간 위로 붕 뜨듯이 배치가 되는 것이 특징입니다. 물론 이로 인해 해당 요소가 가지는 block의 성격을 무시하게 되겠죠. 다음 짧은 유튜브 영상을 보면 쉽게 이에 대한 개념을 잡을 수 있을 것 같습니다. https://www.youtube.com/watch?v=xara4Z1b18I position: absolute 속성과 속성값이 지정된 요소와의 차이점은, pos.. 2023. 4. 10. CSS 기본 - 잊고 넘어가기 쉬운 것들에 대한 복습 CSS 기본 CSS란 Cascading Style Sheets의 약자로, W3C에서 만들었으며 HTML이 화면 등에서 어떻게 표시될지 묘사하는 역할을 합니다. 웹 프론트엔드 개발을 하기 위해서는 CSS를 계속해서 접하게 되고 필수적으로 알아야하기 때문에 HTML과 함께 굉장히 사소하고 그저 자주 쓰는 기술 정도로 치부되는 경우가 있는데, 특히 주니어 단계에서는 은근히 모르고 넘어가거나 잊어서 다시 찾아보게 되는 일이 종종 있습니다. 이에 기본 내용을 복습하면서 잊고 넘어가기 쉬운 부분들 혹은 머릿속에 잘 녹아들어있어야만 하는 것들에 대해서 기록해봅니다. 1. 선택자 (Selector) 1-1. 기본 선택자 (1) 유형 선택자(Type selector) : 익히 알다 싶이 명시된 요소를 선택하며, 예를 들.. 2023. 4. 6. MIME 타입이란? MIME 타입이란? 1. MIME 타입 MIME는 Multipurpose Internet Mail Extensions의 약자로, HTTP 통신에서 서버가 클라이언트에게 리소스를 넘겨줄 때, 해당 파일의 타입을 알려주기 위한 메커니즘입니다. 클라이언트는 이를 통해 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기에, 적절한 MIME 타입 설정은 필수입니다. 이메일 파일 첨부 기술에 쓰이다가 현재는 웹기술 전반에 쓰이게 되어서 이름에 Mail이 들어가게 되었습니다. 2. MIME 타입의 전체 목록 MIME 타입의 종류는 상당히 다양합니다. 새로운 MIME 타입의 추가도 거론되고 있으나 현재로는 보안상의 이유나 코드비트 증가 등의 이유로 심사숙고 되는 분위기 입니다. 아래 MIME 타입의 전체 .. 2023. 3. 28. WAI-ARIA 란 무엇인가 WAI-ARIA 란 무엇인가 1. WAI WAI(Web Accessibility Initiative)는 W3C에서도 웹 접근성의 표준을 만드는 것을 담당하는 기관입니다. 2. ARIA 자바스크립트 등에 의해 동적으로 변화하는 요소를 가진 웹 페이지 등 다양한 기능과 상호작용을 가진 요즘의 고도화된 웹 페이지를 RIA(Rich Internet Applications)이라하는데, ARIA(Accessible Rich Internet Applications)는 장애나 기타 불편함을 가진 사용자가 이러한 웹 페이지에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성과 그 특성을 가진 웹 페이지를 뜻합니다. 개발자의 입장에서는, HTML5에 존재하는 시맨틱한 태그만으로 원하는 타겟을 구현할 수 없는 등의 경우에.. 2023. 3. 28. 검색엔진최적화(SEO) 기초 검색엔진최적화(SEO) 기초 1. 검색엔진 최적화 검색엔진 최적화, SEO(Search Engine Optimization)는 Google, Bing 등의 검색 엔진에서 웹사이트를 더 나은 검색 랭크를 갖도록 최적화하는 기술입니다. 이를 통해 더 많은 트래픽을 유도할 수 있기에, 검색 포털 사이트에서 사용자가 키워드 검색시 검색 결과 상위에 랭크되면 좋을만한 서비스 혹은 웹페이지를 가진 사람들이라면 관심 갖고 공부해야 할 기술입니다. 기본적으로 검색 포털로 가장 많이 사용되는 서비스가 Google이므로 Google의 검색엔진을 예시로 간단하게나마 SEO에 대해 파악해봅시다. 2. Google 검색의 3단계 2-1. 크롤링 크롤러가 인터넷에서 찾은 페이지로부터 텍스트, 이미지, 동영상을 다운로드합니다. 크.. 2023. 3. 27. 웹 접근성(Accessibility) 1. 웹 접근성 웹 접근성이란 웹사이트 및 웹과 관련한 도구나 기술들이 장애나 불편함을 가진 사람들이 쉽게 쓸 수 있는 방법으로 디자인되고 개발된 것을 이야기 합니다. 웹 접근성을 위해 고려해야하는 장애나 불편함은 인지장애와 같은 정신적 불편함부터, 팔을 쓸 수 없거나 시력이 없거나 저하된 신체적 불편함은 물론, 아이를 한 손에 업고 있어서 한 쪽 팔만 사용할 수 있다던가 하는 일시적인 불편함을 모두 포함합니다. 인터넷의 아버지라 불리는 Vint Cerf는 “인터넷은 모두를 위한 것이지만, 우리가 그렇게 만들지 않으면 인터넷은 그렇지 않을 것입니다.”라고 말했습니다. 팔의 사용이 불편한 사람들, 청각이나 시각이 불편한 사람들, 사용하는 언어가 다른 사람들 모두가 웹 사이트와 앱을 접근하고 사용할 수 있어.. 2023. 3. 22. HTML Best Practice 유지보수 하기에 용이하고 확장하기 쉬운 HTML 문서를 작성하기 위해서는 HTML 작성에 대한 Best Practice를 꼭 한 번은 알고 넘어가는 것이 좋다 생각합니다. 다음은 html-best-practice 라는 깃허브 페이지의 내용을 번역 및 요약한 내용입니다. ( https://github.com/hail2u/html-best-practices ) 1. HTML 전반 HTML문서 시작에 DOCTYPE 명시할 것 가능한 문자 레퍼런스를 쓰지 말 것 UTF-8로 HTML을 작성하면 대부분의 문자와 이모지 등은 모두 직접 쓸 수 있다. Bad : Copyright © 2014 W3C® Good : Copyright © 2014 W3C® &, , ", and ‘ 는 문자 레퍼런스로 변환할 것 Bad :.. 2023. 3. 20. 이전 1 2 3 다음
