본문 바로가기
관리자

Programming-[Frontend]

 (62)
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..
HTML / 기본 / Tag, ID, Class, Comment 1. HTML의 구성 Tag HTML은 Text들을 구분해주는 'tag'로 둘러싸여있다. Tag는 기본적으로 Text 형식으로 되어있다. Index 최초 파일은 index.html로 작성한다. 왜냐하면 웹서버들이 기본적으로 index.html 파일을 제일 먼저 찾도록 되어있기 때문이다. 2. 기초Tag와 기초 지식 : 구글 크롬과 같은 브라우저가 이 문서는 html임을 인식할 수 있도록 알려주는 tag이다. : 안에 있는 text들이 html임을 나타내준다. 별다른 기능은 없다. 태그는 한번 열면 반드시 닫아줘야 한다는 의미로 닫는 태그도 작성한다. : 유저에게 보이는 것은 아니고, 내가 만드는 웹사이트의 정보를 소스코드에서 제공하는 것이다. : 유저에게 보이는 내용이 들어가는 태그이다. : 제목을 쓰고..
HTML, CSS / 기본 개념 1. HTML HTML은 Hyper Text Markup Language의 약자로 Programming 언어가 아니다. 왜냐하면 Programming이란 순서대로 작성되는 것을 말하는데, (ex. 클래식 음악의 순서, 행사 순서 등을 계획하는 것을 프로그래밍이라고 하기도 함) HTML은 꼭 정해진 순서대로 작동하는 것은 아니기 때문이다. 단순히 어떤 Text를 Markup, 즉 각 부분이 '제목'인지, '내용'인지, '링크'인지 표시해주는 언어인 것이다. 2. CSS CSS는 Text의 사이즈, 색깔 또는 그림의 사이즈, 형태, 배경 등이 어때야 하는지 정의해주는 것이다. Design 툴이라고 보면 될 것 같다. 약자는 Cascading Style Sheet이다. Cascading이란게 폭포라는 뜻을 갖..

티스토리툴바