티스토리

채니의 개발일기

검색하기

블로그 홈

채니의 개발일기

xcwaonvy.tistory.com/m

윤채니챈 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

CSS - 전환효과(transition) transition 요소의 전환(시작과 끝)효과를 지정하는 단축속성 tranisition: 속성명 지속시간 타이밍함수 대기시간; (transition-property, transition-duration, transitio-function, transitio-delay) transition-property: 전환효과를 사용할 속성 이름 지정 기본값 all : 모든 속성에 적용 속성이름 : 전환효과를 사용할 속성 이름 명시 transition-duration: 전환효과의 지속시간을 지정 기본값 0s: 전환효과없음 시간: 지속시간(s)을 지정 transition -timing-funtion linear:일정하게 ease: 느리게-빠르게-느리게 ease - in: 느리게-빠르게 ease-out : 빠르게-느리.. 공감수 0 댓글수 0 2023. 9. 8.
가상요소선택자 (::before,::after) ::before 선택자 ABC 요소의 내부앞에 내용 삽입 ::after 선택자 ABC 요소의 내부뒤에 내용 삽입 .custom-icon::before 가상요소선택자를 부여함으로써 content에 기호추가 .custom-quote::after 가상요소선택자를 부여함으로써 content에 "기호추가 공감수 0 댓글수 0 2023. 8. 19.
CSS - 플렉스(정렬): flex container, flex items, justify-content, flex display: flex;는 CSS의 속성 중 하나로, 요소들을 가로 또는 세로 방향으로 정렬하고 공간 배분을 조정하기 위한 도구 1.Flex Container: Flex Container는 Flexbox 레이아웃을 적용하기 위한 부모 요소입니다. lex Container에 display: flex; 또는 display: inline-flex;를 설정하여 Flexbox 레이아웃을 활성화시킨다. Flex Container에 적용되는 주요 속성: display: flex 또는 inline-flex 값을 사용하여 Flex Container를 정의 flex-direction: Flex Items의 배치 방향을 결정 (row, column, row-reverse, column-reverse 등). jus.. 공감수 0 댓글수 0 2023. 8. 19.
CSS- a태그: 링크선택자 밑줄없애기 text-decoration: none 위 선택자 처럼 a태그의 밑줄을 없애주기위해서는 text-decoration: none 코드를 작성할것 a{ text-decoration: none; } 이후 hover를 추가하여 링크선택자임을 알려줄것 마우스로 선택시 색상이 바뀌게 된다 a:hover{ color:#000; } 공감수 0 댓글수 0 2023. 8. 19.
postion을 통해서 수직 가운데 위치하기(top:0, bottom:0, margin:auto 0) : .box1에 top,bottom에 0을 주고 position:absolute;값을 주면 위치상 부모 요소를 파악하지 못하기때문에 container위에 box1이 위치함을 알 수 있음 : .container에 position:relative;추가 .box1 { width: 100px; height: 100px; background-color: red; position:absolute; top: 0; bottom: 0; margin: auto 0; } hegith값, top:0, bottom:0, margin: auto(top,botoom) 0;으로 지정하면 수직가운데 위치 할 수 있다 번외편: 수평가운데 위치 left:0, right:0;, marging: auto, width 지정하면 수평가운데로 위.. 공감수 0 댓글수 0 2023. 8. 18.
CSS - postion 속성 postion CSS의 position 속성은 HTML 요소의 위치를 지정하는 데 사용되는 속성이다. 이 속성을 사용하여 요소를 상대적으로 배치하거나 절대적으로 배치하고, 필요에 따라 다른 요소들과 겹치도록 조정할 수 있다. position 속성값 static: 기본값으로, 요소들은 문서의 일반적인 흐름에 따라 배치. top, right, bottom, left, z-index 속성을 적용x relative: 요소자기자신을 기준 -> 위치상 부모를 relative 속성으로 설정가능 absolute: 위치상 부모요소를 기준으로 배치된다-> 구조상 부모요소 이기때문에 위치상 부모가 누구인지 파악할것 fixed: 요소가 뷰포트(브라우저 창)에 상대적으로 고정되어 스크롤해도 화면에서 사라지지 않는다. stick.. 공감수 0 댓글수 0 2023. 8. 18.
css - 배경(background-color,background-image,background-repeat,background-position) background-color: 요소의 배경 색상 지정 (기본: 투명, 색상:지정가능한 색상으로 설정) background-image: 요소의 배경 삽입(기본:none,ulr('경로')지정가능) div{ background-color: orange; height:300px; width:300px; background-image:url('https://i.namu.wiki/i/r1p0Hcj114_mWM3dnODq2RxaLqIuQU0YLJtWjOHIUgR5rAi-r0-vylnm6dTDHRrzXI88KAp2vcF8_hH17sfW9g.webp') } -> image를 설정했지만 div태그의 설정 크기보다 커서 화면에 제대로 출력되지않음 background-size: 배경사이즈 설정 -> background-si.. 공감수 0 댓글수 0 2023. 7. 30.
css - display속성 CSS의 display 속성은 요소의 표시 방법을 지정하는 데 사용된다 HTML 요소는 각각 기본적인 특성을 가지며, 이러한 속성을 display 속성을 사용하여 변경할 수 있다. 인라인과 블록요소 설명↓↓↓↓ 2023.07.16 - [프론트엔트/HTML,CSS] - CSS:너비(width, height), 인라인과블록요소 CSS:너비(width, height), 인라인과블록요소 너비 너비는 모두 기본값은 auto(브라우저가 넓이 계산)으로 지정 width: 가로넓이 height: 세로넓이 인라인,블록요소 인라인요소: 포함한 컨텐츠 크기만큼 자동으로 크기조절가능 ex)span태그 -> 자동 xcwaonvy.tistory.com 각요소가 이미 지정되어있는값 block: 요소를 블록 레벨 박스로 지정. 너비.. 공감수 0 댓글수 0 2023. 7. 30.
CSS - 가상클래스 (first-child,last-child,nth-child,부정선택자) 복합선택자를 활용하여 자식선택자 선택가능 복합선택자 관련 글 ↓↓↓↓↓ 2023.07.16 - [프론트엔트/HTML,CSS] - css선택자(기본선택자,태그선택자,클래스선택자,아이디선택자) css선택자(기본선택자,태그선택자,클래스선택자,아이디선택자) 기본선택자 This is a paragraph. This is an inline element. This is a block element. CSS 기본 선택자는 모든 요소를 선택합니다. *를 활용해 전체선택 * { color: red; } 태그 선택자는 특정 태그의 요소를 선택합니다. xcwaonvy.tistory.com fist-child :특정 요소의 첫 번째 자식 요소를 선택하는 데 사용되는 가상 클래스 선택자 : 이 선택자는 해당 요소가 형제 요소 .. 공감수 0 댓글수 0 2023. 7. 24.
CSS - 가상클래스 (:hover, :active,:focus) :hover 마우스 커서가 올라가거나 포커스를 받았을 때 스타일을 변경하는데 사용됩니다. 즉, 사용자가 요소 위로 마우스 커서를 올릴 때 또는 키보드 포커스가 해당 요소에 있는 경우, hover 상태가 발생합니다. :hover 사용예시 .box{ height:100px; width:100px; background-color:orange; transition:1s; } .box:hover{ width:300px; background-color:royalblue; } :active 사용자가 요소를 마우스 클릭하는 동안 해당 요소가 :active 상태가 됩니다. 이 링크를 클릭해보요. a:active { color: red; text-decoration: none; } focus 사용자가 요소를 선택하거나 포.. 공감수 0 댓글수 0 2023. 7. 19.
CSS- margin CSS에서 margin은 요소 주위의 공간을 조절하는 속성입니다. margin을 사용하여 요소의 상하좌우에 여백을 추가하거나 감소시킬 수 있습니다. margin 속성의 기본값은 0입니다. 이는 요소 주위에 어떠한 여백도 적용하지 않음을 의미합니다. auto 값은 브라우저가 자동으로 여백을 계산하여 요소를 가운데 정렬하는 데 사용될 수 있습니다. 이는 주로 블록 요소를 가운데로 정렬하는 데 유용합니다. -> margin-left와 margin-right를 auto로 준값 = magin: auto; 해도 같은값이나옴 margin의 단축속성 선택자 { margin: 상단 우측 하단 좌측; } 1) div { margin: 10px 20px 30px 40px; } -> 상단 여백을 10픽셀, 우측 여백을 20픽.. 공감수 0 댓글수 0 2023. 7. 18.
HTML - 절대경로 상대경로 상대경로 ./" (현재 디렉토리): "./"은 현재 작업 중인 디렉토리를 나타냅니다. 이것은 일반적으로 현재 파일이 위치한 디렉토리를 의미합니다. 예를 들어, 현재 디렉토리에 있는 "image.jpg"라는 파일을 참조하려면 다음과 같이 사용할 수 있습니다: "../" (상위 디렉토리): "../"는 현재 디렉토리의 상위 디렉토리를 나타냅니다. 이것은 파일이나 폴더를 현재 디렉토리보다 한 단계 위의 디렉토리에서 찾을 때 사용됩니다. 예를 들어, 현재 디렉토리의 상위 디렉토리에 있는 "styles.css"라는 파일을 참조하려면 다음과 같이 사용할 수 있습니다: 절대경로 "/" (루트 디렉토리): "/"는 웹 서버의 루트 디렉토리를 나타냅니다. (루트 경로는 파일 시스템이나 웹 서버에서 최상위 디렉토리 또는 .. 공감수 0 댓글수 0 2023. 7. 18.
css선택자(기본선택자,태그선택자,클래스선택자,아이디선택자) 기본선택자 This is a paragraph. This is an inline element. This is a block element. CSS 기본 선택자는 모든 요소를 선택합니다. *를 활용해 전체선택 * { color: red; } 태그 선택자는 특정 태그의 요소를 선택합니다. div { color: blue; } 클래스 선택자는 특정 클래스를 가진 요소를 선택합니다. .my-class { color: green; } ID 선택자는 특정 ID를 가진 요소를 선택합니다. #my-id { color: yellow; } 복합선택자 복합 일치 선택자 복합 일치 선택자는 특정 태그와 조건을 함께 사용하여 요소를 선택합니다. 예를 들어, div 태그가 id 속성의 값이 main인 요소를 선택하려면 div#.. 공감수 0 댓글수 0 2023. 7. 16.
CSS:너비(width, height), 인라인과블록요소 너비 너비는 모두 기본값은 auto(브라우저가 넓이 계산)으로 지정 width: 가로넓이 height: 세로넓이 인라인,블록요소 인라인요소: 포함한 컨텐츠 크기만큼 자동으로 크기조절가능 ex)span태그 -> 자동조절이기때문에 가로,세로사이즈를 조정할수 없다. 블록요소: 대부분 아무것도 나타내지않으며 auto설정(가로사이즈를 최고의 넓이로 늘어남) ex)div 태그 This is an inline element. This is a block element. -> display를 inline과 block으로 바꾸기 div { border: 1px solid red; } -> css에서 border값을주면서 각 요소가 차지하는 넓이 확인 inline요소는 가로길이가 최소인반면 block요소는 가로길이가 최대.. 공감수 0 댓글수 0 2023. 7. 16.
구글머티리얼 아이콘 사용방법 기본적인 아이콘들은 구글에서 CSS코드를 제공한다 그러면 머티리얼 아이콘 사용밥을 알아보자 https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com 1.head에 추가 2. body태그에 추가 upload 3. 이름을 변경하면서 아이콘을 바꾼다 ex) Done 공감수 0 댓글수 0 2023. 7. 14.
CSS - 웹폰트 https://fonts.google.com Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com : 브라우저 마다 보이는 폰트가 다르기때문에 포트를 지정할 것 ***나눔 고딕으로 설정하기 (대부분 나눔고딕 사이즈는 :400 과 700을 주로 활용) -> selected family에 400,700추가 1. 링크방식의 CSS코드를 에 추가 2. font-familly 를 css에 복사 붙여넣기 예시 코드 body{ color: red; font-size: 100px; font-family: 'Nanum Gothic', sans-serif; } -> 구글.. 공감수 0 댓글수 0 2023. 7. 14.
HTML - tap에 이미지추가 - png 이미지: rel = icon, href = 이미지주소.png 추가 -> 스타벅스 이미지를 활용하는 경우 결과창이 이렇게 보임 공감수 0 댓글수 0 2023. 7. 14.
CSS:전반적인 개요 (class와id, 스타일 속성작성, 종속성, 영역,스타일초기화) CSS는 Cascading Style Sheets의 약자로, HTML 문서의 스타일을 정의하는 데 사용되는 언어입니다. CSS를 사용하면 HTML 문서의 요소의 크기, 색상, 위치 등을 지정할 수 있습니다. id와 class 클래스 선택자(class selector): HTML 요소에 지정된 클래스 속성의 이름을 사용하여 요소를 선택하는 데 사용됩니다. 클래스 속성은 HTML 요소에 여러 개 지정할 수 있으므로, 클래스 선택자는 여러 요소를 선택할 수 있습니다. ID 선택자(id selector) : HTML 요소에 지정된 ID 속성의 이름을 사용하여 요소를 선택하는 데 사용됩니다. ID 속성은 HTML 요소에 한 개만 지정할 수 있으므로, ID 선택자는 한 요소만 선택할 수 있습니다. style 속성 .. 공감수 0 댓글수 0 2023. 7. 13.
HTML기본 + git에 업로그하기 HTML과 XML은 모두 웹 페이지를 만들기 위해 사용되는 마크업 언어입니다. HTML은 웹 페이지의 구조와 모양을 정의하는 데 사용되며, XML은 데이터를 저장하고 전달하는 데 사용됩니다. HTML은 태그를 사용하여 웹 페이지의 구조를 정의합니다. 태그는 기호로 정의되며, 여는 태그와 닫는 태그로 구성됩니다. 여는 태그는 태그의 이름을 나타내며, 닫는 태그는 여는 태그의 이름과 동일합니다. 태그 사이에는 웹 페이지의 내용이 들어갑니다. 속성은 엘리먼트에 추가적인 정보를 제공하기 위해 사용됩니다. 일반적으로 속성은 여는 태그에 추가되며, 속성 이름과 속성 값으로 구성됩니다. 속성은 속성이름="속성값"의 형식으로 작성됩니다. 예를 들면, style="color:red"는 style 속성에 color:red.. 공감수 0 댓글수 0 2023. 7. 11.
프론트엔드의 개요 프론트엔드란? 웹사이트나 웹 애플리케이션에서 사용자가 보고 상호작용하는 부분을 말합니다. 예를 들어, 웹사이트의 레이아웃, 폰트, 색상, 버튼, 메뉴 등이 프론트엔드에 해당합니다. 프론트엔드 개발자는 이러한 요소들을 구현하고, 사용자에게 친숙하고 편리한 화면을 제공합니다. 프론트엔드 vs 백엔드 프론트엔드는 사용자가 보고 상호작용하는 부분을 말하며, HTML, CSS, 자바스크립트 등의 언어를 사용합니다. 백엔드는 사용자가 보지 못하는 부분으로, 서버와 데이터베이스를 관리하며, 사용자의 요청을 처리합니다. 백엔드에서는 Ruby, Java, Python 등의 언어를 사용합니다. 웹&앱의 동작 방식 웹의 동작 방식 - 사용자 컴퓨터(브라우저)에서 주소창에 페이지 주소를 입력하면, 브라우저는 DNS 서버에게 .. 공감수 0 댓글수 0 2023. 7. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.