본문 바로가기

Web Layouts

 (22)
(CSS) input[type="date"] placeholder 적용 처리 "도움이 되셨다면 공감과 댓글로 지지해주세요!!" 시작일과 종료일에 캘린더 기능을 구현하기 위해 JS의 input type='date'를 이용하였다. input type='date'와 전체 페이지가 조화롭게 보이게 하기 위해 최대한 유사한 색감을 사용했다. placeholder와 CSS 적용하였다. 처음 날짜 선택 전에 '날짜선택' placeholder를 주었다. 이를 위해서 몇가지 설정이 필요하다. HTML CSS input[type='date']::before { content: attr(data-placeholder); width: 100%; } input[type='date']:focus::before, input[type='date']:valid::before { display: none; } ..
(CSS) CSS 선택자 CSS 선택자 a { background-color: yellow; } CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성 a: 선택자 background-color: 속성명(property) yellow: 속성값(value) 선언시작, 선언구분자( ; ) 선택자는 CSS를 적용하고자 하는 HTML 요소를 가리킨다. * { } : 전체 선택자 h1, h2, p { } : 그룹 선택자 header > h1 { } : 자식 선택자, 부모 태그 바로 아래 계층에 있는 요소 header h1 { } : 후손 선택자, 부모 태그 안에 들어가 있는 모든 요소 자식과 후손(자손) 선택자의 차이 - https://sectumsempra.tistory.com/57 속성 선택자 기본 속성 선..
(CSS) postion 속성 (feat. static, relative, absolute, fixed) "다시 공부하는 CSS" postion 속성 static : postion 속성을 부여하지 않았을 때 가지는 기본값 relative : 현재 위치에서 상대적인 offset 속성을 줄 수 있음 absolute : 부모 중 static이 아닌 요소의 위치를 기준으로 상대적인 offset 속성을 줄 수 있음. 부모 태그가 없는 경우에 특정 요소 postion에 absolute를 설정하면 브라우저 왼쪽 상단의 좌표가 0, 0이 된다. 부모 태그가 있는데 부모 position 속성의 값이 모두 static인 경우도 브라우저 왼쪽 상단의 좌표가 0, 0이 된다. absolute 속성을 주는 순간 이 태그 요소는 다른 태그 요소들과는 완전히 다른 층으로 이동하였다. 3차원 좌표계에서 z축이 변경되었음 fixed : ..
(CSS) flexbox (feat. flex-direction 설정에 따른 차이) "다시 공부하는 CSS" 급하게 배워서 써먹기는 하지만 체계적이지 못한 상황을 해결하기 위해 다시 정리하고 있습니다. (추가) 콘텐츠 정렬 방법 flexbox를 제대로 이해하기 위해서는 axis에 대한 개념이 필요하다. aixs는 main과 cross axis로 구분한다. mian axis는 flex-direction 속성에 의해 결정된다. flex-direction이 row 이면 main axis는 가로축(row 흐름) flex-direction이 column 이면 main axis는 세로축(column 흐름) axis를 기준으로 정렬하는 속성에는 justify-content와 align-items가 있다. justify는 main 기준 정렬, align은 cross 기준 정렬이다. 기본은 flex-d..
(CSS) @media에서 Only Screen 과 Screen의 차이 반응형 웹페이지 제작에 유용하게 사용되는 미디어 쿼리. CSS 파일에서는 @media(엣 미디어)를 통해 구현된다. 참고로 Styled Component에서는 아래와 같이 삽입하면 된다. export const SectionInfoContainer = styled.div` display: flex; justify-content: center; align-items: center; border: 3px solid blue; margin: 10px; width: 100%; height: 600px; @media screen and (max-width: 770px) { flex-direction: column; } `; 적용하며 screen과 only screen의 차이가 궁금하게 되었다. only 키워드는 ..
(CSS) 변형-2D Transform, CSS 좌표 체계 CSS3에서는 transform 속성을 사용하여 HTML 요소를 변형(transform)시킬 수 있다. transform에서 x, y, z 좌표를 사용한다. 좌표는 아래 그림과 같다. CSS 좌표체계에서 기준점은 브라우저의 왼쪽 상단이다. 이 기준점 각 축의 화살표 방향이 양의 방향이고, 반대는 음의 방향이다. Z축은 모니터에 있는 사용자의 방향을 가리킨다. transform의 메소드 translateY로 예를 들어보자. translateY(y)는 요소를 Y축을 기준으로 y만큼 이동시킨다는 의미다. y의 값이 양수일 경우 요소는 아래와 그림의 빨간선만큼 이동한다.
(CSS) CSS 사용자 속성 과거에는 SaSS, LESS, Stylus와 같은 CSS 전처리기를 통해 CSS 변수를 사용하였다. 그러나 최근들어 CSS 자체에 변수를 설정하고 사용할 수 있는 개념이 추가되어 CSS전처리기 없이도 변수를 사용할 수 있게 되었다. CSS 변수를 지정하는 이유는 반복되는 값의 재사용을 쉽게하기 위함이다. 카카오나 네이버를 보면 사이트의 브랜드를 위해 디자인이나 색상이 통일된 것을 볼 것이다. 루트 요소(:root) 선언 : root 는 CSS에서 가상으로 클래스를 만들어 웹페이지의 문서 구조 트리상에서 루트 요소를 선택하는 것이다. 웹페이지에서 루트는 이기 때문에 : root 는 과 같다. : root 에서 선언된 변수 스코프는 전역이다. 그래서 어디서든 불러와서 사용할 수 있다. 자세히 이야기를 하면 ..
(CSS) 태그 id, class로 스타일링 차이 CSS 스타일링 지정할 때 태그에 id 혹은 class를 통해 스타일링 영역을 지정한다. id는 해당 HTML문서에서 한번만 지정이 가능하기에 사용에 주의를 기울여야 한다. 그런데 class도 이름만 다르게 하면 단독으로 사용이 가능하기 때문에 id 와 class를 분명한 차이를 인식하지 못하였다. 그런데 분명한 사용상의 차이를 발견하게 되었다. 이 차이는 CSS의 적용상의 흐름을 따라가다 자연스럽게 발생하는 문제 때문에 생겨나지 않았을까 짐작한다. class를 사용하는 이유는 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서이다. 그런데 한꺼번에 동일한 CSS를 적용하다 보니 개별 요소를 배타적으로 표현해야 하는 이슈가 있었을 것이다. 그러다보니 class의 분류외에 id라는 선택자를 사용해서 ..

티스토리툴바