HTML 기본

시멘틱 태그 ( Semantic Tag ) 란 ? 시멘틱(semantic)은 말 그대로 '의미의' 라는 뜻이다. 태그(tag)는 HTML 요소이고 HTML 문서를 구성하는 기본 단위이다. 한마디로 표현 하자면 시멘틱 태그는 ' 의미있는 HTML 요소' 라고 이해할 수 있다. 시멘틱 태그를 사용 하는 이유 1. 검색 엔진의 최적화 (SEO) 웹 사이트에서 우리는 원하는 정보를 얻고자 서치를 하곤 하는데 , 검색엔진에 노출되려면 검색 키워드에 대응하는 인덱스를 만들어 주는게 중요합니다. 그래서 인덱스를 생성할 때 사용되는 정보는 HTML 코드 에서 오는것이므로 시멘틱 태그를 검색엔진이 읽고 해석하게 해주어 개발자의 의도를 좀 더 명확하게 표현할 수 있다. 2. 웹접근성 웹 브라우저가 HTML 만 보고도 he..

Application Programming Interface ( API ) 란 ? - 한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법 - 이라고 한다. 이게 무슨 개소리인지 잘 모르겠어서 자세히 살펴보려고 한다. 우선 저 데이터 주고받는 방법 에 집중할 필요가 있다. 예를 들어보자 먹을때에 살아있음을 느끼는 돼지(me)가 식당에 가서 주문을 한다고 치자 식당 주인에게 내가 먹고싶은거를 즉흥적으로 주문하는것이 아닌 그 식당만의 메뉴 ( 즉 메뉴얼 ) 이 있고 그것을 보고 내가 주문을 하게 될것이다. 그 메뉴를 우리는 그 식당의 API 라고 정의 한다. 즉 이 식당의 API 는 === 식당과 손님이 음식을 주고받기 위한 방법 인 셈이다. 이걸 컴퓨터로 적용 시키자면 어떤 특정 서비스를 제공하는..

웹 이미지는 비트맨(Bitmap)과 벡트(Vector) 가 있다. 우리가 사용할 사진의 포맷들은 크게 .jpg / .png / .svg 등이 있다. 여기서 우리가 사용할 이미지를 고르는 기준은 어떤 이미지가 좀 더 효율적으로 쓸 수 있는가? 일 것이다. 비트맵과 벡터를 간단하게 알아보자. 비트맵 정교하고 다양한 색상을 자연스럽게 표현. 확대/축소 시 계단 현상, 품질 저하. ex) 풍경사진, 동물사진 등 벡터 확대/축소에서 자유로움. 용량 변화가 없음. 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움. ex) 아이콘, 로고 등 뭐 대충 이런식으로 개념을 정리하면 된다. 그게 무슨 말 인데 씹덕아 만약에 이런 귀여운 움짤을 보는데 이런 움직이는 이미지가 확대해서 그림이 하나도 안깨질려면 엄청난 양..

본격적인 HTML 을 시작하기 전 필수로 알아야할 개념이 있다. 바로 Display 속성인데 이 Display 속성이란 요소 ( ex. 빨리JavaScript 하고싶다)들을 어떻게 배치하고 보여줄 것인지를 결정한다. 크게 None, Block, Inline, Inline-Block 이렇게 있는데 각각 차이점을 살펴보자 구글링해서 보기쉬운 비교 코딩을 한번 짜보자 ( feat . 매운코딩 ) 그림을 보고 전체적인 감을 한번 익혀보고 내용을 정리해보자 1. display : none UI 화면상에 보이지 않도록 숨기는 것 어떠한 영역을 가지지 않으며 완전 삭제된 것처럼 보인다. ( visibility : hidden, disabled=true 와 다르게 공간까지 모두 사라진다) 2. display : blo..