HTML9 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. 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. 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. HTML Forms 1. client-side form validation 이란? client-side form validation은 HTML form 요소와 관련하여, 데이터를 서버로 전송하기 전에 필요한 모든 form의 요소들이 적절한 형식으로 채워졌는지 확인하는 절차를 말합니다. 최초 유효성 체크 과정이자, 이를 통해 사용자가 부정확한 입력을 하면 바로 그것이 잘못됐음을 알려주어 다시 입력할 수 있는 기회를 줄 수 있기 때문에 client-side의 잘 설계된 유효성 검사는 사용자 경험을 증진시킬 수 있습니다. 서버로 데이터가 전송된 뒤 그것이 잘못됐음을 사용자가 받아보려면 데이터가 오고가는 동안 눈에 띄는 시간 간격이 존재할 수 있기 때문입니다. 하지만 이 과정은 악의적인 사용자가 우회하고자 한다면 쉽게 우회가 가능.. 2022. 12. 13. Semantic HTML 작성하기 1. Semantic(시맨틱) 이란? 시맨틱이란 단어의 뜻을 전반적으로 우리 말로 나타내자면 코드 조각에 내포된 의미라고 볼 수 있습니다. 예를 들어 Javascript의 경우, 특정 라인의 JS가 실행됐을 때 어떤 효과가 일어나는지의 의미합니다. 코드를 작성할 때 함수 이름 등을 Semantic을 고려해서 지으면 가독성이 좋고 코드를 이해하기가 훨씬 쉬워집니다. 예를 들어, '복숭아'라는 항목을 가진 HTML 요소를 생성하는 함수를 상상해봅시다. 단순히 build('Peach')라고 함수 이름을 지을 수 있을테지만 createLiWithContent(‘Peach') 라고 작성하면 동작 자체는 똑같을지 몰라도, 코드 실행 효과가 함수 이름에 그대로 나타나게 되어 훨씬 코드를 이해하기 쉽고 보기 좋을 것입.. 2022. 10. 31. HTML 기본 (下) 1. 태그의 경우 문서의 제목을 정의며 그렇기에 내용으로 텍스트만을 가질 수 있습니다. SEO에 굉장히 중요하기때문에 정확하고 의미있는 title을 부여하도록 해야합니다. 태그는 보통 character set이나 페이지 설명, 키워드, 문서의 저자, viewport 세팅을 위해 사용합니다. 브라우저가 내용을 어떻게 표시하고 리로드할지 알려주고 다른 웹서비스나 검색엔진에게 정보를 제공하는 역할입니다. HTML 작성시 뷰포트를 설정하여 모든 기기에서 웹사이트가 잘 보여지도록 해야합니다. 태그는 베이스 URL이나 페이지의 모든 상대 URL의 타겟을 설정합니다. 그렇기에 href속성이나 target속성 둘 중 하나 이상을 반드시 포함해야 하며, 한 문서엔 단 하나의 태그만 존재해야합니다. 2. 뷰포트(Viewp.. 2022. 10. 20. HTML 기본 (中) 1. 주석(Comment) 2022. 10. 19. HTML 기본 (上) 1. HTML이란? HTML이란 Hyper Text Markup Language의 줄임말로, 웹페이지를 만들기 위한 표준 마크업 언어입니다. 쉽게 말해 웹 페이지의 구조를 설명하기 위한 언어로, HTML 파일은 일련의 요소들(elements)로 구성되어 각 요소들은 브라우저가 어떻게 콘텐츠를 나타낼지 알려줍니다. 1989년에 Berners-Lee가 www를 발명한 후 1991년에 HTML을 발명, 2014년부터 HTML5가 W3C의 권장 표준이 되었습니다. HTML 문법은 시작태그 - 요소 내용 - 종료태그로 구성되며 중첩이 가능합니다. 아래는 HTML파일의 예시입니다. 첫 번째 제목 첫 번째 문단 은 해당 문서가 HTML5 문서임을 알려줍니다. 이 태그는 페이지의 최상단에 단 한번만 등장합니다. 태그는.. 2022. 10. 19. 이전 1 다음
