position position 속성은 요소의 위치를 조정하는데 사용되는 속성이다. 다음과 같은 속성들을 조합하고, 다른 속성들과 함께 사용하여 원하는 레이아웃과 위치를 구현할 수 있다. static 기본값으로, 요소를 문서의 일반적인 흐름에 따라 배치한다. top , right, bottom, left 등의 속성은 적용되지 않는다. relative 요소를 자기 자신을 기준으로 상대적으로 이동시킬 수 있다. 이동시키려는 경우 top , right, bottom, left 속성을 사용할 수 있다. 또 다른 요소들과 겹칠 수도 있다. absolute 가장 가까운 조상 요소 중 position 속성이 static이 아닌 경우를 기준으로 위치한다. 다른 요소들의 영향을 받지 않고 원하는 위치로 이동할 수 있다...

SCSS (Sassy CSS) SCSS는 웹 개발에서 사용되는 스타일 시트 언어중 하나로, CSS의 확장버전이다. 보다 효율적이고 모듈화된 방식으로 스타일을 작성하고 관리할 수 있게 도와준다. // 변수 선언 $primary-color: #3498db; $secondary-color: #e74c3c; // 믹스인 정의 @mixin button-style { padding: 10px 20px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; } // 스타일 규칙 .button-primary { @include button-style; background-color: $primary-color; color: white; &:hover ..

💬 들어가며 프로젝트가 끝난 후 슬비쌤이 해주신 피드백을 통해 접근성에 대해 되돌아보고 있다. 생각보다 접근성에 대해 놓친부분이 많아서... 수정을 하던 중 공유하고 싶은 부분을 적어보려 한다. ❓ 문제 상황 스크린 리더가 페이지를 읽을 때, 괄호, 꺽쇠등을 모두 읽어내며 스크린리더를 이용하는 사용자에게는 필요하지 않은정보를 제공하기 때문에 그 부분을 수정해야 했다. 해당 페이지는 React프로젝트를 진행했던 우동집의 About Us 페이지 이다. 💡 문제 해결 캐릭터 이미지를 "캐릭터 이미지" 그자체로 읽어내주는 정보가 필요하지 않다는 느낌이 들어 img 태그의 alt=""를 공백으로 뒀다. 또한 const 나 let등 스크린리더로 읽어주는게 필수 요소가 아닌 부분은 읽어주지 않는게 낫고 또한, < L..

💬 들어가며 마크업과 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를 사용하면 알바가기 싫다가 하나의 문장이 된것처럼 ..

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 네비게이..