티스토리

안경잡이 구루루

검색하기

블로그 홈

안경잡이 구루루

gururuglasses.tistory.com/m

구루루(gururu) 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

인라인(Inline) , 블록(Block) , 인라인블록(Inline - block) 알아보기(+미완) (썸네일) 웹 문서를 이루고 있는 요소들은 박스 모델이다 기본적인 박스 모델에 대해 알아보고 그 다음 박스모텔의 종류인 블록,인라인, 인라인 블록에 대해 알아보자 (1) 박스 모델(Box model) 콘텐츠: 내용일 들어갈 자리 패팅: 박스와 콘텐츠 영역 사이의 여백 테두리: 박스의 테두리 마진: 박스 모델들 사이의 여백 (2) inline block inline-block 기본 너비 컨텐츠만큼 부모의 너비만큼 컨텐츠만큼 width, height 속성 무시 적용 적용 가로공간 차지 공유 독점 공유 margin 속성 ( 바깥쪽 여백 ) 가로만 적용 모두 적용 ( 상하는 다른것과 서로 겹칠시 더 큰 것을 기준으로 상쇄 ) 모두 적용 padding 속성 ( 안쪽 여백 ) 가로만 적용, 세로는 배경색만 모두 적.. 공감수 0 댓글수 0 2023. 8. 31.
CSS Diner 문제풀이 3 (#21~32) +미완 2023.08.19 - [프론트 엔드 (front-end)/CSS] - CSS Diner 문제풀이 1 (#1~10) 2023.08.19 - [프론트 엔드 (front-end)/CSS] - CSS Diner 문제풀이 2 (#11~20) 공감수 1 댓글수 0 2023. 8. 19.
CSS Diner 문제풀이 2 (#11~20) +미완 2023.08.19 - [프론트 엔드 (front-end)/CSS] - CSS Diner 문제풀이 1 (#1~10) 2023.08.19 - [프론트 엔드 (front-end)/CSS] - CSS Diner 문제풀이 3 (#21~32) 공감수 1 댓글수 0 2023. 8. 19.
CSS Diner 문제풀이 1 (#1~10) +미완 2023.08.19 - [프론트 엔드 (front-end)/CSS] - CSS Diner 문제풀이 2 (#11~20) 2023.08.19 - [프론트 엔드 (front-end)/CSS] - CSS Diner 문제풀이 3 (#21~32) 공감수 1 댓글수 0 2023. 8. 19.
웹사이트 따라하기 사이트 추천 +추가예정 다양한 웹페이지 디자인 모음 ▶ dribble 다양하고 예쁜 웹페이지 디자인들이 많아서 보고 참고하며 최대한 따라해보면 실력향상에 도움이 될듯합니다. https://dribbble.com/shots Dribbble - Discover the World’s Top Designers & Creative Professionals DeFi Yield Farming Crypto Platform UI/UX Dashboard SaaS Design dribbble.com ▶ bootstrap 사용자 친화적인 웹페이지를 bootstrap 애서 제공 하는데 일정 조건들을 충족시켜 사용이 가능하다. 뿐만 아니라 여러 아이콘들도 무료로 이용 가능하다. https://getbootstrap.com/ Bootstrap Power.. 공감수 1 댓글수 0 2023. 8. 19.
CSS 선택자(Selector), 결합자(Conbinator) 사용방법 & 우선순위 정리 및 관련 사이트 모음 +미완 결론부터 얘기하자면 (1) 캐스케이딩(cascading) (2) 스타일 상속 을 기반으로 (3) 스타일 중요도 >> (4) 스타일 적용범위 순서로 우선순위가 정해진다. (1) Cascading CSS 에서 C는 캐스케이딩(cascading) 의 줄임말이다. 폭포 라는 의미로 위에서부터 아래로 내려간다는 뜻이다. 이를 CSS 와 연결지어 생각하면 CSS가 위에서부터 아래로 적용된다는 뜻이다. 가장 기본적인 개념이므로 이를 먼저 숙지하고 아래 우선순위를 따지는 것이 좋다 (2) 스타일 상속 여러 태그는 서로 포함 관계가 존재한다. 이때 포함하는 태그를 부모 요소 , 포함된 태그를 자식 요소 라고 한다. 자식 요소에서 별다른 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전.. 공감수 1 댓글수 0 2023. 8. 15.
CSS 를 HTML에 적용시키는 방법들 (Apply CSS to HTML) CSS 를 HTML에 적용시키는 방법은 크게 3가지 경우가 있다. 인라인 스타일(inline style), 내부 스타일 시트(internal style sheet), 링킹 스타일 시트(linking style sheet) 1) 인라인 스타일(inline style) : HTML 태그마다 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다. 이 때문에 여러 태그들에 공통 속성을 재사용해서 부여할수 없고 한번 설정된 스타일을 변경하기 어렵다. 또한 HTML과 CSS를 같이 혼용해서 사용하기 때문에 가독성 또한 좋지 못하다. 그래서 특정 태그에만 적용시키는 특별한 경우를 제외하고는 사용되지 않는다. ex_1 오펜하이머는 원자핵폭탄을 만드는 멘헤튼 프로젝트의 리더였다. result_1 2) 내부.. 공감수 1 댓글수 0 2023. 8. 14.
웹 사이트 고화질 이미지배경(svg) 관련 툴 사이트모음 https://app.haikei.app/ Haikei app.haikei.app https://www.shapedivider.app/ Shape Divider App Create fully responsive shape dividers for your next web project www.shapedivider.app 공감수 1 댓글수 0 2023. 8. 13.
HTML Tag(태그) , attributes(속성) 자세한 설명 모음 2 (+ 시멘틱태그 추가 ) 2023.07.03 - [프론트 엔드 (front-end)/HTML] - HTML Tag(태그) , attributes(속성) 자세한 설명 모음 1 (+ 23.8.5 uppdate ) HTML Tag(태그) , attributes(속성) 자세한 설명 모음 1 (+ 23.8.5 uppdate ) 모든 tag를 외우고 살 수 없어서 필요할 때마다 찾기 편하게 사용하기 위해 만든 글입니다. 다들 도움이 되면 좋겠습니다. ctrl + f를 눌러서 를 적어 바로 찾을 수 있습니다. 아래 글은 특히 yalco(얄 gururuglasses.tistory.com 이전 1편을 이어서 만들었습니다. 순서상관 없이 이곳에 없는 자료는 1편에서 참고 부탁드립니다. 모든 tag를 외우고 살 수 없어서 필요할 때마다 찾기 편하게.. 공감수 1 댓글수 0 2023. 8. 5.
css 정리 2(+미완) 반복.공통되는 style css를 적용시키는 방법으로 1. html 에서 의 href 속성을 이용 2. @import url 을 특정 css에 다른 css를 추가하는 법 css애서는 대쉬 2개(--) 를 앞에 붙이면 변수로 선언 가능 ex. --not-good : not-good 이라는 변수 / css에서 변수를 사용할 때는 var(변수이름, 변수없을 경우 대안값) 형식을 이용 ex. u{ background-color: var(--warn, lightblue) : --warn 변수가 없으면 lightblue를 적용 , :변수이름 ----> 의 형태의 경우 모든 요소들에서 적용할 수 있는 변수 특정 요소에서만 특정 css를 적용시키기 위해 {} 로 둘러 쌓는다. ex. u { --not-good: wav.. 공감수 1 댓글수 0 2023. 7. 26.
(+미완성) 자바스크립트(Java Script) 기초 정리1 ● 자바스크립트(java script)를 사용하기 위한 환경 1. ● 변수와 상수 let, const 7.20 반환한다의 의미 typeof ----> 브라우저는 바로 typeof 사용 가능/// vsc 같은 에디터는 console.log(typeof 대상) 으로 감싸야함 // 위 typeof를 통한 자료형 정리// typeof의 반환값은 문자열 so typeof를 두번 감싸면 결과적으로 전부 'string'으로 나옴. // consol.olg는 반환하는게 아니기 때문에 undefined가 출력되는 자바스크립트는 정수,실수 구분 x undefined, null 도 값임 많은 다른 언어들과 다른 점 null (비어있음, 의도적인 빈 , 뭐가 있어야할 자리이지만 없을떄 ) != undifined (정의되지 않.. 공감수 0 댓글수 0 2023. 7. 21.
<img> 태그 src 속성(attributes) 이미지 파일 경로 지정 방법 (+미완) ㅇㅇ 공감수 0 댓글수 0 2023. 7. 20.
CSS 기본 배우기 보호되어 있는 글입니다. 공감수 1 댓글수 0 2023. 7. 18.
html 특수문자 모음 (Entity Code References) ※ 자주 사용하는 엔티티 코드 모음,정리 특수문자 문자식 표현(entity code) 숫자식 표현(entity number) > (greater than) › (공백 한칸) ※ 참고자료 https://entitycode.com/ Entity Code - A Clear and Quick Reference to HTML Entities Codes About EntityCode The idea came from my constant need to add those hard to remember HTML entity codes, such as the copyright symbol ( © ), every time I’m developing a new website or writing a new article. U.. 공감수 1 댓글수 0 2023. 7. 12.
( + 미완성) 에밋(Emmit)과 약어(Abbreviation)를 이용한 html code 쉽게 작성하는 방법 모음 보호되어 있는 글입니다. 공감수 1 댓글수 0 2023. 7. 10.
(+ 미완성) VSC (visual studio code) 유용한 단축키 모음 1) 양쪽 태그 한번에 바꾸기 control + d 를 동시에 누르면 양쪽 태그가 동시에 선택되며 같이 바꿀 수 있음 2) 참고영상) https://www.youtube.com/watch?v=Wn7j5dfbJF4 공감수 0 댓글수 0 2023. 7. 3.
HTML Tag(태그) , attributes(속성) 자세한 설명 모음 1 (+ 23.8.5 uppdate ) 모든 tag를 외우고 살 수 없어서 필요할 때마다 찾기 편하게 사용하기 위해 만든 글입니다. 다들 도움이 되면 좋겠습니다. ctrl + f를 눌러서 를 적어 바로 찾을 수 있습니다. 아래 글은 특히 yalco(얄코)님 강의를 참고로 작성했습니다. (paragraph) 사용법 ) content 설명 ) 1. p태그 속content가 하나의 문단을 나타낸다.(띄어쓰기 단위) 2. 보통우리가 사용하는 문서들은 여백, 들여쓰기를 통해 문단을 구분하지만 html에서는 아래와 같이 따로 태그를 사용해야 만 문단이 구별된다. 예시) first second first second 출력결과 first second first second (qoute) 사용법) 사용법) content 설명) 1. 현재 맥락에 관련이 깊거나.. 공감수 2 댓글수 0 2023. 7. 3.
프론트 엔드(front-end)의 HTML, CSS, JAVA SCRIPT 에 관한 이해 1) HTML, CSS 는 반드시 같이 쓰인다 HTML 은 브라우저에게 내용이 무엇인지(ex. content, title, text, link, list 등) 결정하고 CSS 는 브라우저에게 그 내용이 웹사이트에서 어떻게 보여야 하는지(ex. 색상,크기,위치 등) 를 결정짓는다. 예를 들어 HTML 은 '이건 image야' 라고 말하고 CSS는 '그 image는 25x100 크기어야해' 라고 하는 역할을 수행한다. ====> 즉, HTML 은 CSS 가 없으면 정돈되지 않은 내용들로 사람들이 보기 힘들고 CSS 는 HTML 이 없으면 꾸밀 대상이 없기 때문에 혼자 사용하는 것은 무의미 하다. 둘은 상호보완적인 관계로 볼 수 있기 때문에 반드시 함께 사용한다. 예시를 통해 쉽게 이해해 보고자 한다. 위 사.. 공감수 2 댓글수 0 2023. 7. 3.

문의안내

티스토리
로그인
고객센터

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