'🌕 Front-end/CSS' 카테고리의 글 목록

[ CSS ] position 속성

2023.04.27

🤍 position 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성이 배치할 최종 위치를 결정한다. 예제 position: static; 더보기 https://developer.mozilla.org/en-US/docs/Web/CSS/position position: relative; top: 40px; left: 40px; 더보기 https://developer.mozilla.org/en-US/docs/Web/CSS/position position: absolute; top: 40px; left: 40px; 더보기 https://developer.mozilla.org/en-US/docs/Web/CSS/position position: sticky; top: ..

🌕 Front-end/CSS

[ CSS ] text-indent

2023.04.25

🤍 text-indent 블록에서 텍스트 줄 앞에 높이는 빈 공간의 길이를 설정한다. ( 들여쓰기 ) 가로 간격은 글자 콘텐츠 상자 왼쪽 가장자리를 기준으로 한다. text-indent: 0; text-indent: 30%; text-indent: -3em; 더보기 - css text-indent 속성 https://developer.mozilla.org/ text-indent - CSS: Cascading Style Sheets | MDN The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block. developer.mozilla.org

🌕 Front-end/CSS

[ CSS ] box-sizing 속성

2023.04.24

🤍 box-sizing CSS 속성 box-sizing은 계산된 요소의 전체 너비와 높이를 정하는 것이다. child container을 보시오 box-sizing: content-box; width: 100%; 더보기 더보기 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing box-sizing: content-box; width: 100%; border: solid #5B6DCD 10px; padding: 5px; 더보기 더보기 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing box-sizing: border-box; width: 100%; border: solid #5B6DCD 10px..

🌕 Front-end/CSS

[ HTML,CSS ] 이미지 링크 걸기 & 검색 창 만들기 & 버튼 transition feat.flex

2022.10.07

들어가기 아이콘에 링크를 걸고, 검색창을 만들 것이다. 📌아이콘에 링크 걸기 먼저 마음에 드는 아이콘 이미지를 찾는다. 위 코드를 입력한다. 1. href : 게시판으로 이동하는 링크. 2. width : 화면에 보여지는 크기. 3. alt : 이미지가 안나타날 때 대신 보여지는 글. 📌 검색창 검색창도 내가 이미지를 만들어서 가져가야하는건가 생각했지만, 검색해보니 내가 원하는 모양으로 만드는 자료가 있었다. 굉장히 동적인 자료였지만 난 변화가 없는 것을 원해서 반응형은 제외하였다. 구상 설계도는 돋보기가 좌측에 있지만, ( 미적으로 이쁘다고 생각했었음 ) 검색할 글자를 입력하고 검색! 을 하려면 검색으로 전환되는 링크 버튼 ( 돋보기 ) 가 우측에 있어야 한다고 생각해서 바꿨다. ..

🌕 Front-end/CSS

[ HTML, CSS ] 배경화면 투명하게 (흐리게) 하는 방법, 자식 요소에 같이 적용되는 문제

2022.10.06

위 사진처럼 배경화면을 가득채우고 흐리게 만들고 싶어서 자료를 찾아보았다. 들어가기 CSS의 opacity를 이용하여 HTML의 요소를 투명하게 만드는 방법과 자식 요소는 제외하고 배경하면만 투명하게 만드는 방법을 알아본다. 📌 opacity IR.Write html,body{ width: 100%; height: 100%; margin: 0; } body{ overflow: hidden; } .back_container{ width: 100%; height: 100%; background: url("./images/forest.png"); background-size: cover; opacity: 0.5; } .head{ margin: 0; text-align:..

🌕 Front-end/CSS

[ CSS ] 속성 ( display & float & clear & 공백 제거 )

2022.09.14

들어가기 레이아웃에 영향을 미치는 속성에 대해 알아보자. 📌 레이아웃에 영향을 미치는 속성 🤍 display Block 과 Inline 요소의 성격을 바꿀 때 사용한다. inline-block을 사용하면 두 요소의 성격을 모두 가진다. 🤍 float Hello Hello float에 대한 속성을 제어하고자 할 때 사용한다. none ( 기본값 ) clear 속성을 설정하지 않은 것과 같다. left 왼쪽으로 붙는 float 정렬을 취소한다. right 오른쪽으로 붙는 float 정렬을 취소한다. both 왼쪽, 오른쪽 모두 붙는 float 정렬을 취소한다. 🤍 공백 제거 브라우저와 공간 사이의 공백 제거하기 과 태그는 margin 과 padding 값을 가지므로 초기화를 해주어야 한다. ..

🌕 Front-end/CSS

[ CSS ] 속성 ( margin )

2022.09.14

들어가기 margin은 border 영역으로 다른 요소와 구별하기 위해 쓰이는 빈 영역이다. 즉, 이 말은 다른 요소와의 간격을 만들 수 있다는 것이다. 📌 margin 속성 : 기본 값 = 0 length 고정값으로 지정한다. ( ex, px, em ... ) percent 요소의 width에 상대적인 크기를 지정한다. auto 브라우저에 의해 계산된 값이 적용된다. margin-top border 영역의 위쪽 여백을 지정한다. margin-right border 영역의 오른쪽 여백을 지정한다. margin-bottom border 영역의 아래쪽 여백을 지정한다. margin-left border 영역의 왼쪽 여백을 지정한다. 🤍 margin 축약 margin: [-top] [-righ..

🌕 Front-end/CSS

[ CSS ] 속성 ( padding )

2022.09.14

들어가기 padding 영역은 border 와 content 사이의 여백이다. padding의 세부 속성 값에 대해 알아보자. 📌 padding 속성 : 기본 값 = 0 length 고정값으로 지정한다. ( ex, px, em ... ) percent 요소의 width에 상대적인 크기를 지정한다. padding-top content 영역의 위쪽 여백을 지정한다. padding-right content 영역의 오른쪽 여백을 지정한다. padding-bottom content 영역의 아래족 여백을 지정한다. padding-left content 영역의 왼쪽 여백을 지정한다. 🤍 padding의 축약 padding: [-top] [-right] [-bottom] [-left]; 0 10px 2..

🌕 Front-end/CSS

[ CSS ] 속성 ( border )

2022.09.14

들어가기 border 속성은 요소의 테두리에 관련된 속성을 지정할 때 사용한다. 테두리의 굵기, 모양, 색상을 지정할 수 있는 속성들이 있으며, 앞서 배운 background 속성처럼 여러 속성을 축약하여 적용할 수도 있다. 📌 border 관련 속성 - border-width : 기본값 = medium 선의 굵기를 지정하는 속성이다. 상하좌우 선의 굵기를 다르게 표현할 수 있다. border-width:[top][right][bottom][left]; 키워드 thin, medium, thick 단위 px, em, rem ... ( %, 정수 단위 사용불가 ) - border-style : 기본 값 = none 선의 모양을 지정하는 속성이다. 상하좌우 선의 모양을 다르게 표현할 수 있다...

🌕 Front-end/CSS

[ CSS ] Block 요소 Inline 요소

2022.09.13

📌 Block 요소 - 태그가 대표적이다. - 줄바꿈 현상이 나타난다. - width / hegith 값 사용 가능. ( 공간 만들기 가능 ) - margin / padding 값 사용 가능. ( 상하 배치 작업 가능 ) 📌 lnline 요소 - 줄바꿈 현상 없음. - width / height 값 적용 불가. - margin / padding / bottom 값 적용 불가. 더보기 01. https://2022aionline.elice.io/blcok & lnline 요소 설명 [SW 코딩] 핵심 HTML/CSS 기초 | 2022 AI/SW 온라인 코딩입문 훈련교육 | 엘리스에서 무료로 시작해보세 나만의 웹 포트폴리오, 직접 만들어보세요! 2022aionline.elice.io

🌕 Front-end/CSS

[ CSS ] 속성 ( boxmodel )

2022.09.13

들어가기 HTML의 모든 요소는 사각형의 박스 형태로 만들어진다. 박스는 총 4가지의 영역으로 구분되어 있으며 영역마다 다양한 스타일을 적용할 수 있다. 이 4가지 영역을 통틀어서 박스모델이라고 한다. 학습하기 문서를 배치할 때 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각 요소를 사각형 상자로 나타낸다. CSS를 이용해 이 상자의 크기, 위치 및 속성 ( 색상, 배경, 테두리 크기 등 )을 변경할 수 있다. 📌 boxmodel 구성 더보기 https://www.boostcourse.org/cs120/lecture/92913?isDesc=false - Content 영역 : 요소의 실제 내용을 포함하는 영역이다. 따라서 크기는 내용의 너비 및 높이를 나타낸다. - Border 영역 : ..

🌕 Front-end/CSS

[ CSS ] 속성 ( background )

2022.09.13

들어가기 background 속성은 요소의 배경에 관련된 속성을 지정할 때 사용한다. 배경에 관련된 속성에는 색상, 이미지, 반복 여부 등 여러 속성이 존재하고, 이 속성들을 한 번에 모아서 사용할 수도 있다. 📌 background 관련 속성 - background-color : 기본 값 = trnasparent 배경의 색상을 지정하는 속성이다. 색상 값 적용 방식과 같다. - background-image : 기본 값 = none 배경으로 사용할 이미지의 경로를 지정하는 속성이다. url의 경로는 절대 경로, 상대 경로 모두 가능하다. 만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면, 그 부분에 backgorund-co..

티스토리툴바