본문 바로가기

전체 글158

[CSS] css 기본 , 인접형제 , 일반형제 , 자식 선택자 전체선택자 페이지에 있는 전체 전체 요소를 대상으로 한다. 주의 : 실전에서는 사용하지 말 것을 권함. 브라우저에 과부하가 걸릴 수 있음. * { margin:0; padding:0; } 타입 선택자 h1, p, div, span 등 html 요소(Element)를 선택하는 선택자. 클래스 선택자(.) 특정 값을 class 속성의 값으로 갖는 요소를 선택한다. .abc{ color:red; } p.abc{ color:blue; } /*클래스 값으로 abc를 갖는 p 요소를 선택*/ 인접형제선택자(X+Y) 0 1 2 3 4 div + p{ color:red; } 등위 선택자로 동등한 위치에 있는 태그를 선택하여 css속성을 지정할 수 있다. 지정한 요소의 바로 다음에 위치하는 요소만 선택한다. 그래서 바로.. 2021. 9. 15.
[CSS] css 속성 선택자 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택할 수 있다. [attribute] 해당 속성을 가진 태그를 지정. a[target]{ color:red; } /*a링크 중 target 속성을 가진 태그를 선택*/ [target]{ color:#fff; } /*target 속성을 가진 태그를 선택*/ [attribute="value"] 속성명과 속성값이 동시에 일치하는 요소를 선택자로 지정하는 기능. [class="tomato"]{ background-color:blue; } /*속성명이 class이고, 속성값이 tomato인 요소를 선택자로 지정.*/ p[class="tomato"]{ background-color:red; } /* p 태그 중에서 속성명과 속성값이 일치하는 요소를 선택자로.. 2021. 9. 15.
[CSS] CSS 가상 요소 ::first-line 요소의 첫 번째 줄을 선택한다. 안녕하세요 반갑습니다 안녕하세요 반갑습니다 p::first-line{ color:red; } 결과값 : ::first-letter 요소의 첫 번째 문자를 선택한다. p::first-letter{ color:red; } 결과값 : ::before, ::after 내용의 앞과 뒤에 콘텐츠를 추가하고, 이 콘텐츠는 content=""라는 속성으로 정의한다. 인라인 요소이다. 홈페이지 헤더나 푸터에 구분선을 삽입할 때 컨텐츠 주변의 디자인적 요소를 추가할 수 있을 때 ::before, ::after 태그 활용 가상 요소를 이용해 헤더 푸터의 구분선을 넣거나, 꾸미는 용도로 사용할 수 있다. ::selection 마우스로 드래그 했을 때 선택한 텍스트의 스타.. 2021. 9. 15.
[CSS] CSS 선택자 정리 - 가상 클래스 가상 클래스는 클래스 or 태그명 선택자 뒤에 콜론(:)을 붙여서 표시하는 특별한 요소의 상태, 요소의 순서를 기준으로 자식 요소를 선택하는 방법이다. 1 상태 가상 클래스 선택자 :link, :visited, :hover, :active 는 링크 요소(마우스 클릭에 반응하는 요소)의 다양한 상태를 표현하는데 사용할 수 있는 가상 클래스이다. :link 방문하지 않은 링크를 선택 a:link{ color:red; } :visited 사용자가 방문한 링크를 선택 a:visited{ color:green; } :hover 마우스를 위에 올린 상태 a:hover{ color:orange; } :active 마우스로 클릭한 상태 a:active{ color:coral; } ※ 주의할 점! 링크 클래스들은 스타일.. 2021. 9. 15.
[IT 용어 정리] 비즈니스 로직이란? 1 로직이란? 어떤 프로그램을 만들 때의 논리적인 흐름. 2 비즈니스 로직이란? 홈페이지 회원가입을 예로 들어본다. 유저는 회원가입 폼에 양식을 입력하고 회원가입 버튼을 누르면 회원가입이 진행된다. 개발자는 이 과정들을 구현하기 위해 생각보다 많은 코드를 짜야한다. 이 때 아이디 중복찾기를 예시로 들면 아래와 같은 비지니스 로직이 작성된다. 1. 회원이 작성한 아이디 값을 저장 2. 회원정보가 있는 데이터베이스 연결 3. 데이터베이스에 회원이 작성한 아이디 값이 있는지 중복검사 4. 회원의 아이디가 이미 있는지 없는지 여부를 데이터화 하여 저장 5. 데이터베이스 연결 끊기 6. View 영역에게 가공된 데이터 전달 유저가 바라는 결과물을 올바르게 도출하기 위해 비지니스 로직을 잘 구상해야 한다. 비지니스.. 2021. 9. 14.
[Vue] Watch 속성 1 Watch 속성 computed속성 vs watch 속성 watch를 사용했을 때보다 computed를 사용했을 때 코드가 더 짧다. 최대한 computed 속성을 우선적으로 사용하고 불가피할때 watch를 사용하는 것이 좋다. watch 속성 {{message}} Click {{updated}} 결과값 : 클릭 이벤트 후 : 2021. 9. 12.
반응형

티스토리툴바