본문 바로가기

분류 전체보기47

[CSS] CSS 0918 6일 (filter, transform, border,flex) filter : filter 속성은 흐림이나 색상 변형 등 그레픽 효과를 적용하기 위해 사용한다.속성 값은 함수로 이루어져있고 공백으로 구분해 여러가지 사용할 수 있다.함수blur(x) : 크기 값인 x 만큼을 반경으로 하여 요소를 흐린다. (크기가 작을수록 덜흐리고 클수록 안보일만큼 흐림)brightness(x) :배율 값은 x 만큼 명도를 지정한다. 100%(1.0)이 본래 명도이고, 0%(혹은 0.0)으로 지정할 경우 완전히 어두워진다. 블러 브라이트니스 같이쓸때는 filter: blur () brightness(25%)contrast(x):비율 값인 x 만큼 대비를 지정한다. 100%(혹은 1.0)이 본래 대비이고,0%(0.0)으로 지정할 경우 완전히 회색이 된다.grayscale(x) :비율.. 2025. 9. 18.
깨알 : box-sizing에 대해서 css에 대해 공부하던 중 box-sizing에 대한 개념을 잘 모르겠어서 한 번 써보는 글 box-sizing이란? 개념 정리CSS를 공부하던 중 box-sizing 개념이 헷갈려서 직접 정리해 봅니다.HTML 요소는 기본적으로 내용(content) → 패딩(padding) → 테두리(border) → 마진(margin) 순으로 구성된 박스 모델(Box Model) 구조를 가지고 있어요. CSS로 스타일을 추가하면서 padding이나 border 등을 적용하면, 원래 설정해 둔 width/height보다 박스 전체 크기가 커져서 레이아웃이 무너질 수 있어요. 그래서 이 문제를 방지하기 위해 box-sizing: border-box를 사용하는 것이 좋습니다. box-sizing 종류 : content.. 2025. 9. 17.
[CSS] 0916 4일차(의사요소 ::,background,font,width,height,position,padding,margin) 의사요소의사요소(Pseudo Element)는 요소의 앞이나 뒤에 가상의 요소를 만들거나, 내용에 간단한 번화를 주기 위해 사용한다.(예를들어 요소의 일부분(예: 첫 줄, 첫 글자)이나 요소의 앞/뒤(content inserted) 같은 것을 스타일링할 때 사용)의사요소는 어떠한 선택자 뒤에 콜론 두 개 ( :: ) 와 의사 요소 이름을 붙여 사용한다.의사요소의 종류는 다음과 같다.::after : 선택한 요소의 맨 마지막 자식으로 의사 요소를 생성한다. 이때 content 속성이 표시할 내용으로 존재해야 한다.:: before : 선택한 요소의 첫번째 자식이로 의사요소를 생성한다. 이때 content속성이 표시할 내용으로 존재해야 한다. 31#는 id 생성자 요소의 첫 글자를 빨간색, 글씨 크기 .. 2025. 9. 16.
[인텔리제이 설정] 크롬으로 뷰 띄우기 안나올 때 인텔리제이 사용 도중 코드 작성 결과를 보고 싶은데 확인하는 창이 안나오는 경우가 있었어요. 인텔리제이를 지우고 다시 다운받았더니 설정이 날아간 것 같은데 다시 설정하는 법을 적어볼게요 1.인텔리제이 file - setting 에 들어가줍니다.2. 도구 - 웹브라우저 미리보기들어가서 우선 크롬이 지정되어 있는지 보고 없으면 추가 해줍니다.3. 에디터에서 브라우저 팝업표시 html표시에 체크 눌러줌4. 동작 다시로드 - 브라우저에서 페이지 다시 로드/ 기본 제공딘 미리보기에서 페이지 다시 로드 활성화 시켜줌 (변경시 저장시 설정) 적용 2025. 9. 16.
[CSS] input 박스 클릭-> 연결되어있는 글자색 변경 // 체크박스 체크-> 글씨보이게 하기 1.과제 : 이렇게 로그인 페이지를 만들고 이메일 인풋박스를 클릭하면 위에 연결되어있는 이메일의 색상을 변경하는 것시도해본 방법 이메일 has가 기억이 나서 input에 span을 가지고 있는 input을 찾아서 색상변경을 생각했지만 저러면 span이 아닌 결국 input박스가 색상이 변경되어서실패. 그리고 has는 포함하는 구조에서 사용가능하지만 위에 코드는 input이 글자요소를 포함하고 있지 않기때문에 사용 불가능 수식 엉망임. 지피티의 살짝의 도움을 받아서 한 번 고쳐보았음. has는 부모자식처럼 포함관계에 사용가능 이라는 말을 듣고 이메일 .box가 input을 포함하고 있고, 그 input이 포커스 된 상태일 때 .box의 텍스트 색상이 바뀌는 것!하지만.. 2025. 9. 15.
[CSS] 0915 3일차 (선택자, hover 등등) CSS (Cascading Style Sheets)는 HTML요소에 스타일 (크기, 색상 등)을 적용하기 위해 사용한다. 적용 방법 CSS를 적용하는 방법은 몇 가지가 있는데 다음과 같다.스타일 태그 활용HTML 문서에 있는 head태그의 자식이 될 수 있도록 style태그를 만들어 해당 태그의 내부 내용에 CSS문법을 작성하는 방법을 의미한다.HTML문서 내에 HTML문법과 CSS 문법이 공존하게 됨으로 원하는 코드를 찾기 힘들어지고 유지보수가 까다로워진다.스타일 속성 활용스타일을 적용하고자 하는 태그에 style 속성을 부여하는 방법을 의미한다.요서에 직접 값을 부여함으로 별도의 선택자를 작성하지 않는다.HTML 문서 내에 HTML 문법과 CSS 문법이 공존하게 됨으로 원하는 코드를 찾기 힘들.. 2025. 9. 15.

티스토리툴바