전체 글 102

CSS : 100 DAYS CSS CHALLENGE (100일 CSS 챌린지)

CSS : 100 DAYS CSS CHALLENGE (100일 CSS 챌린지) 100일동안 해당되는 CSS를 넣어서 실력을 쌓을수있는 홈페이지이다. 꾸준히 문제를 풀다보면 CSS 스킬이 늘어날거라 믿고 열심히 하는중 https://100dayscss.com/ 100 Days CSS Challenge 100dayscss.com What is This? 과 How can i join?으로 들어가면 웹페이지에 대한 설명과 사용법이 적혀있다. 100days challenge를 참여하려면 코드펜(Codepen)아이디가 있어야한다. Codepen은 웹에디터인데 코드펜이 어떤건지 금궁하신분은 아래글을 읽어주세요. 2022.04.08 - [TIL/tip] - IDE : 웹 에디터와 통합개발환경(IDE) IDE : 웹 ..

STUDY/tip 2022.05.10

CSS : 버튼을 꾸미는 Border-Style CSS

CSS : 버튼을 꾸미는 Border-Style CSS /* 버튼 간격 설정 */ button { width: 100px; height: 100px; margin: 0px 5px 15px 0px; } /* 버튼 정렬하기 */ .buttonBox { display: flex; flex-direction: row; justify-content: center; } /* 하단부터 버튼 스타일링 */ .dotted { border-style: dotted; } .double { border-style: double; } .none { border-style: none; } .groove { border-style: groove; } .dashed { border-style: dashed; } .outset { b..

STUDY/CSS 2022.05.09

CSS : ::selection - 드래그 시 색상이 변경되는 태그

CSS : ::selection - 드래그 시 색상이 변경되는 태그 HTML 삽입 미리보기할 수 없는 소스 안녕하세요 저는 레슈 입니다. ::selection { background: #085467; color: #fff; } p::selection { background: #afa7bb; color: #fff; } ::selection 는 사용자가 선택한 영역에 스타일을 적용할때 사용한다. 허용되는 속성 color background-color text-decoration text-shadow fill-color,stroke-color,stroke-width

STUDY/CSS 2022.05.09

CSS : CSS Cascading Style Sheets

CSS : Cascading Style Sheets CSS 란? - CSS ( Cascading Style Sheets ) 프로그래밍 언어나 마크업(Mark-up) 언어가 아닌 스타일시트(Style Sheet) 언어이며, 스타일시트 언어는 HTML 문서에 있는 요소들을 선택적으로 스타일링할 때 사용하는 언어이다. 최신 버전은 CSS3이며, 과거엔 CSS1, CSS2, CSS3등 버전을 업데이트할 때마다 추가되는 기능이 있었으나, CSS3이후에는 CSS범위가 엄청나게 넓어짐으로써 여러 CSS모듈 사이의 차이도 너무나 커졌다. 그래서 W3C는 CSS의 버전을 올리지 않는 대신 주기적으로 CSS의 업데이트 현황을 생성하고 있다. (현재 최신 버전은 CSS3이며, 그 이상 버전이 올라가지 않을 예정이다.) 사용..

STUDY/CSS 2022.05.09

HTML : <address> - 연락처를 남길 때 사용하는 요소

HTML : - 연락처를 남길 때 사용하는 요소 HTML 삽입 미리보기할 수 없는 소스 레슈의 연락처 sol.reshur@gmail.com 123 456-78 메일주소 연락처 예전에 오프라인 주소를 나타낼 때 사용했으나 현재는 SNS나 웹사이트 주소 등 통칭해서 묶어서 사용한다. 오프라인 주소, 이메일 주소, 전화번호, SNS 등 어떠한 정보라도 포함할 수 있다. 반드시 포함해야 하는 정보는 연락처가 가리키는 개인, 조직, 단체의 이름이다. 엄청난 특징이 있는 건 아니지만 '주소'라는 의미를 갖고 있다는 점에서 중요하다. 별도의 CSS를 하지 않더라도 자체적으로 스타일을 갖고 있지만 웹브라우저마다 차이가 있다. mailto / tel로 작성한 뒤 해당 연락처를 클릭하면 메일 혹은 통화로 자동 연결된다. ..

STUDY/HTML 2022.05.04

HTML : <abbr> - 줄임말, 약어 (abbreviation)

HTML : - 줄임말, 약어 (abbreviation) : 줄임말, 약어 이니셜을 적어두고 원래 의미를 작성할 때 사용한다. (선택속성인 title을 사용한다.) title 속성은 전체 설명만을 가져야 하며 다른 건 포함할 수 없다. 의 목적은 오로지 HTML작성자의 편리함을 위함이며, 모든 브라우저는 기본적으로 인라인 (inline)으로 렌더링 하지만 브라우저마다 스타일이 다르게 표시된다. HTML 삽입 미리보기할 수 없는 소스 www and HTML 속성 title : 에서의 title은 약어의 원래의미를 작성할 때 사용됨으로 한세트로 생각하면 된다. 전역 속성이라 이 아니어도 사용할 수 있다. 마우스를 올리면 작성한 의미를 볼 수 있다. 기술 요약 콘텐츠 카테고리 : 플로우 콘텐츠, 구문 콘텐츠 ..

STUDY/HTML 2022.05.04

JS : 대화상자를 나타내는 메서드 : alert, prompt, confirm

JS : 대화상자를 나타내는 메서드 : alert, prompt, confirm alert() : 경고 대화 상자를 띄우는 메서드 window.alert("Hello World!"); alert("Hello World!"); alert()을 사용하면 알림 창을 띄우며, 사용자가 확인 버튼을 누를 때까지 계속 창이 띄어져 있다. 상호작용을 한다기보다는 일방적인 안내 창이다. ex ;) 비밀번호가 틀렸습니다. , 이름을 입력해주세요. 등 참고사항 alert()은 사용자의 확인을 제외한 다른 입력을 요구하지 않는 메시지를 전달할 때 쓰이며 사용자는 대화 상자가 닫힐 때까지 다른 모든 인터페이스에 접근할 수 없다. 그러므로 alert()을 남용하면 안 된다. prompt : 텍스트를 입력할 수 있는 대화 상자를..

STUDY/JavaScript 2022.05.03

HTML : <hr/> Horizon Roll - 수평선

HTML : Horizon Roll - 수평선 : horizon roll (수평선) HTML 삽입 미리보기할 수 없는 소스 이야기 장면 전환, 구획 내 주제 변경 등 문단 레벨 요소에서 주제의 분리를 나타낼때 사용한다. 단독으로 문단과 문단 사이를 나눌 때 주로 사용한다. 명시적으로 빈 요소를 나타내기 위해 로 사용한다. 기술 요약 콘텐츠 카테고리 : 플로우 콘텐츠 가능한 콘텐츠 : 없음 빈 요소 태그 생략 : 여는 태그는 필수이지만 닫는 태그는 존재해선 안된다. 가능한 상위 요소 : 플로우 콘텐츠를 허용하는 모든 요소 HTML 삽입 미리보기할 수 없는 소스 This is the first paragraph of text. This is the first paragraph of text. This is ..

STUDY/HTML 2022.05.03

HTML : <i>, <em> - 주위를 위한 태그

HTML : , - 주위를 위한 태그 , : 둘 다 글씨를 기울이지만 의미가 다른 요소 : 주위와 구분할 때 사용하는 요소 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타낸다. 앞뒤와 톤이 달라야 할때 사용한다. 기술용어, 외국어 구절, 등장인물의 생각 등에 사용된다. HTML 삽입 미리보기할 수 없는 소스 i Iron Man is a hero 자바스크립트에서 console.log()는 정말 많이 보게 될거예요. 라틴어 문구 Veni, vidi, vici는 음악과 예술, 문학에 자주 등장합니다. Iron Man is a hero 문장을 보았을 때 로 기울임을 줌으로써 Iron /Man이 아닌 하나의 문장으로 보여줄 수 있게 앞 혹은 뒤와 톤이 다르게 나타낼 때 사용한다. 자바스크립트에서 cons..

STUDY/HTML 2022.05.03