Front-end/HTML (6) 썸네일형 리스트형 [CSS] 심화 개념 정리 1. transition 어떤 상태에서 다른 상태로의 변화를 주는 애니메이션 1) transtion은 state가 없는 요소에 붙어야한다. state에 transition을 준다면 변화를 준것(예- hover라면 마우스를 갖다 댄것)을 그만할경우(마우스를 뗄경우) 원래상태로 바로 돌아간다. 2) transition 은 상태에 따라 바뀌는 요소가 있을때 사용함 상태 ex) hover, active, focus ... transition: background-color 10s ease-in-out; 해석: 배경색을 10초동안 바꾼다. transition: all; state에 적은 모든 것들을 선택한 것 a { color: white; background-color: tomato; text-decoratio.. [CSS] 기본개념정리 3 1. States Active, hover, focus, focus-within, visited active 해당 요소를 마우스로 클릭했을 때 효과를 적용 hover 마우스가 해당 요소 위를 지나갈 때 효과를 적용 focus 키보드로 선택되었을 때 효과를 적용 focus-within 부모 요소에게 적용. 자신의 자식 요소 중 하나가 focused되었을 때 효과를 적용 visited 방문한 사이트일 경우에 효과를 적용 조건을 나열해 여러 상황을 설정할 수 있음. 예 high-tag:hover low-tag:focus{ } 인 경우, 상위 요소위에 마우스 커서가 있고, 하위 요소가 focused되었을 때 효과를 적용하게 된다. state들을 다른 엘리먼트와 연계해서 사용할 수도 있다 1) 부모의 state에.. [CSS] 기본 개념정리 CSS : Cascading Style Sheet Cascading : 위에서 아래로 내려오는 이미지(폭포가 흐르는 것 떠올리기) 어떤 것 다음에 어떤 것이 온다 이것이 cascading이 의미하는 바다. 브라우저가 CSS 코드를 읽을 때 cascading 방식으로, 즉 위에 있는 코드부터 차례차례로 읽힌다. - CSS가 하는 일은 HTML 태그를 가리키는 일. (이 태그는 초록색이다. 이 가리키는 것 자체를 'selector') 1. block과 inline 옆에 다른 요소가 못 오는걸 block , 올 수 있는걸 inline라고 한다. (in the same line) inline의 대표적인 태그 span, link, img가 있다. block의 특징 margin, padding, border (bl.. [HTML] HTML의 기본 태그 (3) 1. a 태그 = 링크 링크거는곳 Href = hyperlink reference = 이 링크를 참조해 링크를 클릭하였을 때 새 창이 열리게 하려면 링크주소 “ 뒤에 target =“_blank”> 링크를 클릭하기전에 뭔지 알고싶다면 Blank 다음에 title=“@@@“> 하면된다. 2. form 태그 (1) input태그 사용자로부터 어떤정보를 입력받을때 사용하는 태그 이 회원 정보를 데이터베이스로 전송할때 사용하는 것은 submit, 전송하다의 뜻으로 type 옆에 사용 하고 이때 value 속성을 통해 이름을 바꿀수있다. 이 정보를 어디로 보낼것인가? 하는것은 이때 정보가 서로 같을수있으므로 각자에 name = “ “ 으로 이름을부여한다. Value 를 하면 입력받는 창에 기본값으로 문자가 들어간.. [HTML] HTML의 기본태그 (2) 1. li, ul, ol태그 li요소는 리스트, 속성: value 목록 아이템의 순번을 지정( ol요소의 자식으로 사용된경우에 한함) ul요소는 아이템의 순서가 중요하지 않은 목록을 나타내며 = 의 부모격 태그로 공간을 나눌수있다. = 의 부모격으로 자동으로 숫자를 앞에 나타내준다. 2.table 태그 표를 만들수 있는 태그이다. table이 가지는 속성들이 몇가지있지만 배운것들만 먼저 정리하겠다. 태그- 테이블 데이터의 약자로 표의 값들 을나타내며 따로따로 지정 해야함 태그 -표의 한행 그룹을 묶어주는 태그. 그위를 table로 감싼다 표안에서 맨위 제목 부분에 해당하는것은 내용 부분은 또한 제목부분은 가아니라 로 묶는다. 은 맨밑부분에 해당하는 표로서 합계같은것을 나타낼때 사용한다. 표병합하는 법 행.. [HTML] HTML의 기본 태그 (1) HTML - Hypertext Markup Language 웹문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한종류이다. IT공부를 하면서 먼저 HTML과 CSS를 통해 무엇인가를 만들어보는것이 좋을것같아 HTML 공부를 시작했다. 공부를 하면서 많이 쓰일 태그들을 정리해보려한다. 1. strong 태그 strong요소는 해당 내용의 중요함을 나타냄 strong을 중첩하면 중첩할 수록 중요하다고 할 수 있다. 강조하는부분 2. u 태그 u요소는 underline으로 텍스트에 밑줄을 긋는 스타일 요소 부분 3. h1~ h6태그 각 숫자들은 제목의 등급을 나타내며, h1요소가 가장 높은 등급이고, h6요소가 가장 낮은 등급 H1~ h6. 숫자가 올라갈수록 크기가 작으며 여기서 h는 headings - 제목.. 이전 1 다음