본문 바로가기
관리자

Programming-[Frontend]/HTML,CSS

 (10)
CSS / Combinators (연결자 또는 결합자) CSS의 특정 tag들을 선택하기 보다 쉽게 위한 개념으로, Combinator라는 것이 있다. 이것은 태그들끼리 부모-자손(descendant), 자식(Child), 인접형제(Adjascent sibilings), 일반형제(General siblings)의 복잡한 관계를 가질 때, 태그의 선택을 훨씬 더 용이하게 만들어준다. 차례대로 살펴보자. 1. Descendant Selector 자손 선택자는 어떤 tag 하위에 있는 모든 일치하는 tag를 선택한다. 단순 띄어쓰기로 구분하여, 하위의 모든 tag들에 적용된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1 2-1 2-1-1 2-1-2 2-1-3 2-1-3-1 2-2 2-2-1 2-2-1-1 cs 1 2 3 div p {..
Checkbox, Radio checkbox는 클릭하면 check가 되고, 다시 클릭하면 check가 해제된다. 또한 여러 개 항목이 있을 경우에도 중복으로 선택이 가능하다. radio는 클릭하면 check가 되지만, 다시 클릭하여 check 해제를 할 수 없다.(기본적으로는) 그리고, 여러 개의 항목 중 1개의 항목만 단독으로 선택 가능하다. checkbox의 작성방법은 아래와 같다. input tag를 쓰되, type은 checkbox로 주면 된다. name, value는 반응형 웹에서 쓰이는 개념으로, checkbox가 check 되었을 때, 서버에 전달할 이름과 값을 지정해주는 것이다. checked를 적어놓으면, checkbox가 check된 상태로 웹페이지가 로딩되게 된다. radio는 여러 개의 버튼 중, 한개만 선택되..
HTML,CSS / Checkbox Customizing 하기 1. 필요성 html 에서 를 생성하면, 아래 그림과 같은 가장 기본적인 checkbox만 만들어진다. 해당 checkbox는 background color와 check-mark의 색깔 및 크기, text와의 위치 배열 등이 모두 정해져 있기 때문에, 각종 웹서비스에서 활용하기에 제한이 많다. 그래서 customizing을 해야하는데, customizing에 들어가는 요소들이 html/css 초보가 알기에는 어려운 요소들이 많아서 각 요소들을 하나하나 분해해서 공부해보고자 한다. 2. 구성요소 2-1. Label tag label tag는 input 과 관련된 checkbox, radio 등 사용자가 선택하여 입력을 넣는 요소가 있을 경우, 그 요소에 내용을 달아주고, 요소 뿐만 아니라 요소에 달린 내용..
HTML,CSS / Cursor Style, inherit, input Tag Style="Cursor:attribute" Cursor는 해당하는 위치에 마우스를 갖다댔을 때, 마우스의 모양을 변화시킬 수 있다. 대표 속성은 다음과 같으며, 수많은 속성들이 있다. -default: 화살표 -auto: 자동 -pointer: 손가락모양(클릭가능 대상 선택시 나타나는) -wait: 로딩 -move: 손가락모양(drag시 나타나는) ex) Pointer 속성 : inherit 속성에 inherit을 입력해주면, parent element의 속성과 같은 속성을 같게 된다. ex) color:inherit; -- parent element의 글자와 같은 색깔의 글자가 됨. Tag: input 사용자에게 입력을 받을 수 있는 입력창을 만들어 준다. ex) input창의 placeholder의..
CSS / Transition, Transform, Animation, Media Query 1. Transition Transition은 state(hover, active, focus, visited)에 따라 속성들이 시간을 두고 변화할 수 있게 해주는 것이다. .box:hover을 background-color: white로 주되, .box에서 transition을 적용하여 5s ease-in-out option을 적용하였다. 단순 ease-in-out 말고 다른 option들은 아래 링크에서 참조해볼 수 있다. https://developer.mozilla.org/en-US/docs/Web/CSS/transition margin을 바꾼다거나, color와 background-color를 동시에 바꾼다거나(all) 등을 적용할 수 있음을 animation으로 확인 가능하다. 2. Trans..
CSS / Flexbox, Selector(Pseudo-selector), States 1. Flexbox 여러 개의 box를 만들 때, 1)화면의 크기가 바뀌면 box의 크기가 바뀌게 하고 동시에 2) box간의 간격이나 순서를 손쉽게 바꾸기 위한 display property이다. parent element가 있고, 그 아래에 child element가 있을 때만 적용 가능하며, parent element에만 적용하면 child element는 자동으로 조절이 되게 된다. 1-1. 아무것도 적용하지 않았을 때 아래 그림과 같이 parent element에 10개의 child elements(purple boxes)가 block 형태로 나열되게 된다. 1-2. flex 적용 parent element에 display:flex; 를 적용하면 모든 child box가 inline-block ..
CSS / 기본 / Box, Block, Align, Position 1. Box 모델의 구성 html에서 모든 요소는 box이다! Box는 아래와 같이 구성된다. Contents를 Padding이 둘러싸고, 경계선인 border 외부에 Margin이 있다. padding, margin, Border padding은 contents의 영역 크기를 의미하고, margin은 다른 element와의 간격을 의미한다. padding-right: 50px; 과 같이 상하좌우의 값을 조절할 수 있다. -따로 위치를 적어주지 않으면 네 방향에 대해 모두 같은 값을 적용한다. -10px 5px; 이라고 하면 차례대로 상하, 좌우의 값을 의미한다. -10px 5px 2px 1px; 이라고 하면 차례대로 상, 우, 하, 좌(시계방향)으로 값이 적용된다. -margin-left:auto; ,..
CSS / 기본 / Tag, Text(Font) 1. CSS의 형태 CSS는 Selector와 Property로 구성되어 있다. -Selector의 형태 : Tag 또는 #ID 또는 .class 뒤에 {}를 붙인다. -Property의 형태 : "이름: 값;" + Tag와 ID, Class 등을 한번에 지정할 수도 있다. ex) h1 #grid { ... } 한꺼번에 여러개를 지정하기 위해서는 다음과 같이 쓰면 된다. Selector (id, class, tag){ ... } 2. CSS 써보기! Tag 내부에 CSS를 작성하여 html text들과 연결해주면 된다. + 이렇게 Tag를 적용하면, html 페이지가 여러개일 경우, Tag를 html 페이지 파일마다 똑같이 붙여넣어줘야 한다. 페이지가 엄청 많다면? 사람이 할 짓이 아니다... 그래서 h..

티스토리툴바