💬 들어가며 이전에 만들었던 web 홈페이지를 리팩토링 하는중, lighthouse를 통해 성능최적화까지 진행중에 있었다. 이전에 다른 프로젝트를 마무리하며 진행하다가 알게된 한가지 팁을 소개하고자 한다. ❓ 문제 상황 SEO 검색엔진 최적화 부분에서 사진과 같이 문서에 메타설명이 없음. 이라고 뜰 때 해결하는 아주 간단한 방법이다. SEO 란? SEO (Search Engine Optimization)의 약자로 "검색엔진 최적화" 를 뜻한다. 웹 사이트나 웹 페이지가 검색 엔진 경과 페이지(SERP)에서 높은 순위에 나타나도록 최적화 하는 프로세스를 가르킨다. 이 프로세스는 유용한 콘텐츠를 제공하고 웹 사이트를 검색 엔진 알고리즘에 친화적으로 만들어 사용자들이 검색 결과에서 해당 웹페이지를 더 쉽게 찾..
HTML MDN 모든 웹기술이 담겨있는 문서 MDN https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org whatwg html에 관한 표준, 커뮤니티 사이트 https://whatwg.org/ Web Hypertext Application Technology Working Group (WHATWG) whatwg.org HTMLhint HTML에 필요한 정적 코드 분석 도구 htt..
💬 들어가며 마크업과 CSS 를 하다보면, 상자 안에 가운데 정렬해 아이콘을 넣어야 할 때가 있다. 가로 정렬, 세로 정렬등이 있지만 이번에는 세로로 가운데정렬을 하는 경우를 살펴보자. 위와 같은 예시 이미지 처럼, 반응형에 맞춰 input 창의 세로 높이도 조절이 될때마다 그에 맞게 눈동자 아이콘이 가운데에 위치 하도록 해보자. 초보자들은 내가 했던 것 처럼, input 창의 height 값에 맞춰서 대강 가운데에 오도록 했을 것이다. 💡 문제 해결 input 창과 눈 아이콘을 의미하는 button 태그는 같은 레벨에 있을 것이다. 해당 두가지를 div태그로 묶어 relative를 준다. 그렇다면 div창크기에 맞춰 input이 생길 것이고, button은 div태그의 크기에 맞춰서 이동되도록 할 것 ..
태그와 태그는 모두 클릭 가능한 요소이지만, 차이점이 존재한다. 태그 태그 목적 하이퍼링크 생성 클릭 가능한 버튼 생성 탭 순서 탭 키를 이용한 포커스 이동 시 고려됨 탭 키를 이용한 포커스 이동 시 고려되지 않음 전달되는 값 href 속성을 이용하여 다른 페이지 또는 문서로 이동 클릭 이벤트를 처리하기 위해 자바스크립트 함수 또는 폼 제출 사용 스타일 밑줄과 파란색으로 기본 스타일 지정됨 기본 스타일이 없으며, 개발자가 스타일을 직접 지정해야 함 Anchor 태그 Anchor 태그는 어디론가 이동할 수 있는 링크나 페이지내의 특정 영역으로 이동할 때 사용한다. 엔터키로 동작하며 내부엔 text contents 가 있어야한다. 또한 href 가 없이 javascript로 작동하게 하면 안된다는 특징이 있..
https://developer.mozilla.org/ko/docs/Web/CSS/float float - CSS: Cascading Style Sheets | MDN CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. developer.mozilla.org MDN 사이트를 참조하여 글을 작성합니다. float float은 요소를 띄워 표시하는 기능이다. 하지만 가야한다. 알바가기싫다... 알바가기싫다... 알바가기싫다... 일단 알바가기 싫다에 기본적인 float left를 사용하면 알바가기 싫다가 하나의 문장이 된것처럼 ..
Swiper Demos 위와 같이 HTML/CSS 이미지 슬라이드를 만들어보자! 먼저 사이트에 접속한다. https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 디자인 예시를 보면서 원하는걸 선택해 준다. 빨간색으로 밑줄친 Core에 들어가서 먼저 붙여넣을 것들을 붙여넣어준다 Core 에 들어가면 html 파일이 작성된걸 볼 수 있는데 10번째 줄에 있는 link를 Head 영역안에 붙여넣어준다 영역안에 붙여넣고 제일 아래에 보이는 두가지
Flex는 최대한 예시를 많이 집어 넣으면서 변하는 과정을 볼게요 먼저 박스들을 만들어봅시다. Flex 의 기본 작동 11111 22 3 4444 Flex container 가 될 container 하나와 그안에 박스를 만들 item 4개를 만들어봤습니다. 그리고 container에 Flex를 주면 이렇게 되네요. 이처럼 부모요소인 container 안에 가로로 쭉 배치가 되게 됩니다. 만약 부모요소의 너비값이 이거보다 작으면 어떻게 될까요? 보이는 것처럼 아무 이상이 없는것 처럼 보이지만 개발자 도구를 통해 확인하니 초록색 영역인 부모 너비를 뚫고 나온 모습을 확인할 수 있습니다. 가로로 배치되고, 너비가 충분치 못해도 똑같이 작동하는 것을 확인할 수 있죠. Flex 방향 설정(가로, 세로) Flex는..
그리드 가든 CSS에서 박스들을 배치하는 방법중 Grid에 대해 공부해보자. https://cssgridgarden.com/#ko 먼저 그리드 가든 게임사이트에 들어가면 간단하고 재밌게 문법에 대해 알아 볼 수 있다. 그리드에는 column과 row 즉 열과 행이 있다. column (열) -> 세로 row (행) -> 가로 다른 개발언어와 다르게 시작점이 1이므로 이미지에서 보이는 빨간색 기준점들은 2가 된다. /* 행과 열의 시작점*/ grid-column-start: 2 ; grid-row-start: 3; /* 행과 열의 끝지점*/ grid-column-end: 3; grid-row-end: 4; 와같이 시작점을 지정해주거나 끝지점을 지정해 주면된다. 박스1 박스2 박스3 박스4 박스5 박스6 박..
우선 반응형 웹 디자인을 하기 위해선 마크업을 잘 해야한다. (마크업 이란. 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지로 HTML에선 HTML구조를 짜는 과정을 말함) 완성된 모습 코드리뷰 먼저 가장 눈여겨 봐야할 점은 모바일과 웹의 모습을 순차적으로 본다면 순서가 다르다. 이럴땐 order: -1 을 이용하여 순서를 바꿔줘야 한다. 코드를 보면 위에서 순서대로 1,2,3,4 순으로 작성했다. 모두 웹사이트상을 기준으로 작성했다고 생각하면 편하다. 이제 우리는 모바일을 위해 마크업의 순서를 살짝 변경해줄거다. 뭐를이용해서? order : -1; 속성을 이용해서. order 속성을 -1 주면 우선순위가 먼저로 바뀌게 된다. 따라서 모바일의 로그인, 회원가입에 해당하는 2번 memb..
GNB (Global Navigation Bar) 웹 사이트 전체에 동일하게 적용되는 내비게이션 바로 보통 웹 사이트 최상단에 위치하며 전역에 해당된다는 의미로 Global 이라고 표현한다. 모든 서비스를 표현하는 곳으로 직관적인 것이 좋다. LNB (Local Navigation Bar) 현재 서비스 영역에 해당하는 네비게이션 바를 말한다. 보통 카테고리 아래에 표현되는 네비게이션 바로 중분류, 소분류 등이 자세히 나와 있는 바를 말한다. SNB (Side Navigation Bar) 이름에서 유추가 가능하듯 사이드에 나와 있는 네비게이션 바를 말한다. 메인메뉴, 서브 메뉴를 제외한 나머지 기타 메뉴바에 해당한다. FNB (Foot Navigation Bar) 대한항공 홈페이지에 있는 Foot 네비게이..