전체 글

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

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

여기 어때 야놀자 항공사 등 디자인 + 개발자 사실 어디든 좋고 사무실에 쳐박히는것이 아닌 여행하는 개발자 여행 정보 제공 만들기 국내 여행 중점 사진의 연속성 도시 주요 역이나 이동 중심지의 강조 애니메이션을 통해 도시들 만의 강점 강조 클릭햇을시 사운드 효과도 참고 type 의 디자인적 요소 설계 시각적 새로움에 대한 끊임없는 고민 정보의 우선적 인식 보단 디자인의 우선적 인식 미니멀 디자인 사용시 typing 모션에 추과 효과도 줄 수있고 사진을 많이 쓰는 것에 대한 문제점과 고민이 있을시 해결 문제점에 대한 해결 방안 제시와 화면의 심심함에 대한 해결 모션 블러 처럼 다양한 시각 효과에 대한 끊임없는 제시 사용자가 이용하기 재밌는 웹 사이트 사용자가 제어 할 수 있는 모션들에 대한 고민 전체적인 ..

웹 이미지는 비트맨(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..

그래서 Git 깔고 VS code에 적용했는데 다음은 뭐함? 우선 Staging 을 이해할 필요가 있습니다. 우리가 Git add 로 우리가 작업한 폴더가 있고 기록하고 싶은 파일을 골라야 하는데 그 고른 파일들을 Staging area에 옮기게 되는데 여기서 고른 파일을 옮기는 작업을 Staging 한다고 말합니다. 이제 여기서 Staging 한 파일들을 Commit 함으로써 저장소로 옮겨 저장하게 됩니다. 다른 명령어 알아봐야겠지? 이렇게 여러 파일을 동시에 Staging 할 수도 있고 그냥 하나하나 다 하기 귀찮아서 작업폴더의 모든 파일을 전부 스테이징 하고 싶으면 진짜 간단하게 git add . 해버리면 되고 뭔가 하다가 다 부셔버리고 싶을때 " 갈 " 이라고 외치듯이 git 하기가 너무 힘들고 ..