웹디자인 (HTML,JS)57 728x90 홈페이지 레이아웃 구조를 구성하고 배치하기 홈페이지나 블로그를 원하는 레이아웃 구조로 구성하고 적절하게 배치하는데 사용되는 CSS 속성을 정리합니다. 다양한 형태의 레이아웃이 있는데 아래 CSS 속성을 이용하여 모든 구조의 박스 구성이 가능하다. 선택자와 가상선택자 CSS로 특정 요소를 선택하는 방법 CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다. HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다. blog.pages.kr CSS로 특정 요소를 선택하는 방법 가상선택자는 기본선택자 뒤에 :(콜론)을 붙인 가상 클래스, ::(콜론두개)을 붙인 가상 요소로 요소의 특정 부분을 선택합니다. blog.pages.kr 박스 요소 표시 display - 요소를 표시하는 방법을 .. 2021. 1. 10. CSS로 특정 요소를 선택하는 방법 <가상선택자> CSS로 특정 요소를 선택하는 방법 CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다. HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다. blog.pages.kr HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다. 가상선택자는 기본선택자 뒤에 :(콜론)을 붙인 가상 클래스, ::(콜론두개)을 붙인 가상 요소로 요소의 특정 부분을 선택합니다. 구조 선택자 :empty로 내용이 비어있는 HTML 요소들을 선택한다. p:empty { color: red; } 태그 요소 중 내용(공백포함)이 전혀 없는 요소의 스타일을 빨간색으로 적용한다. :first-child로 첫번째 형제 요소(단일).. 2021. 1. 10. CSS로 특정 요소를 선택하는 방법 <선택자> CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다. HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다. 참고로, jQuery에서는 $('요소')와 같은 방식으로 특정 HTML 태그를 선택할 수 있다. 자바스크립트에서는 getElementById('요소')의 방식으로 많이 사용된다. 함수의미는 get(가져오다) Element(요소) By(부터) Id(Identity:식별값) 정도로 해석할 수 있다. CSS에서 선택자를 활용하기 위해 부모·자식, 형제 관계를 알아야 한다. 부모 형 제 부모·자식은 어떤 태그 안에 다른 태그가 있는 관계로 는 부모이고 와 는 자식이다. 형제는 같은 부모를 둔 태그로 바로 다음에 오는 형제는 이다. 전.. 2021. 1. 9. 반응형 웹을 위한 레이아웃 설계 방법 지난 아티클을 통해 반응형 웹의 정의와 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들에 대해 살펴보았습니다. 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들 반응형 웹(Responsive Web) 개발은 이미 일상이 되었습니다. 다만, 최근 몇 가지 프로젝트를 진행하며 알게 된 사실은 대부분의 개발자들이 반응형 웹에 대한 개념은 이해하지만 막상 어떻게 개발해 blog.pages.kr 이번 아티클에서는 ‘반응형 웹을 어떻게 만들 것인가’에 대한 실질적 내용인 “반응형 레이아웃”에 대해서 알아보고 간단한 실습 예제를 진행하겠습니다. 1. CSS3와 미디어 쿼리 일반적으로 레이아웃은 ‘사물을 공간에 잘 배치하는 것’을 이야기합니다. “Lay something out”이 “~을 잘 사용할 수 있도록 보기 .. 2021. 1. 8. 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들 반응형 웹(Responsive Web) 개발은 이미 일상이 되었습니다. 다만, 최근 몇 가지 프로젝트를 진행하며 알게 된 사실은 대부분의 개발자들이 반응형 웹에 대한 개념은 이해하지만 막상 어떻게 개발해야 하는지는 모른다는 겁니다. Q. 이런 일이 왜 발생했을까? 동료들과 이야기하며 이런 상황이 발생하게 된 이유를 정리해 보니 대부분의 개발자들이 부트스트랩과 같은 CSS 웹 프레임워크를 쓰거나, 반응형 웹을 퍼블리셔의 영역이라고 생각한다는 것을 알게 되었습니다. CSS의 담당자가 개발자인지, 디자이너인지에 대한 역할 정의는 회사별 혹은 팀별로 다르니 이 포스팅에서는 다루지 않겠습니다. Q. 왜 지금에서야 문제가 되었을까? 최근 웹 개발 시 리액트(React), 뷰(Vue), 앵귤러(Angular) 같은 .. 2021. 1. 8. 이전 1 ··· 5 6 7 8 9 10 11 12 다음 728x90 728x90
