Web_Frontend/HTML & CSS2023. 12. 20. 15:45[css] 반응형 웹 디자인 이해하기(em, rem, 미디어쿼리, target 선택자)

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗em : 해당 단위가 사용되고 있는 요소의 font-size 속성값에 비례해서 결정되는 상대 단위font-size : 20p0.5em = 20 px x 0.5 = 10px1em = 20 px x 1 = 20px2em = 20 px x 2 = 40px3em = 20 px x 3 = 60pxfont-size : 10px0.5em = 10 px x 0.5 = 5px1em = 10 px x 1 = 10px2em = 10 px x 2 = 20px3em = 10 px x 3 = 30pxrem : html 요소의 font-size 속성값이 기준rem에서 r은 rootHTML에서 최상위 요소는 이기 때..

[CSS] CSS 레이아웃 및 포지셔닝, 반응형 이해하기
Web_Frontend/HTML & CSS2023. 12. 20. 11:04[CSS] CSS 레이아웃 및 포지셔닝, 반응형 이해하기

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗HTML CSS 레이아웃 및 포지셔닝text 스타일링margin 축소(중복)인접 요소끼리만 margin 축소 현상이 일어나는게 아니라, 부모자식 요소 사이에서도 margin 축소가 일어남.선형 그라디언트linear-gradient( to right, yellow 50%, red 60%, purple )positionstatic : (default) 요소를 일반적인 문서 흐름에 따라 배치차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임relative : 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋 적용abso..

[html,css] HTML & CSS 자세히 알아보기
Web_Frontend/HTML & CSS2023. 12. 14. 18:05[html,css] HTML & CSS 자세히 알아보기

HTML & CSS 자세히 알아보기오늘 수강한 강의 :  【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프 css 코드 서식인라인 스타일을 사용하지 않을 때(style 속성을 통해) CSS 코드는 일반적으로 다음과 같다.p { font-family: sans-serif; text-align: center;}이 코드는 읽기 쉽게 작성되어 있다. 하지만, 반드시 위처럼 작성해야 하는 것은 아니며, 이론적으로는 아래와 같이 작성할 수도 있다.p {font-family: sans-serif;text-align: center;}그러나 위와 같은 코드는 이해하고 유지 관리하기가 훨씬 더 어렵기 때문에 일반적으로 읽기 쉽게 작성한 맨 위의 서식처럼 작성한다. 다음은 CSS 코드 형..

[CSS] CSS 기본 선택자(tag 선택자, 전체 선택자(*선택자), 혼합 선택자)
Web_Frontend/HTML & CSS2021. 11. 18. 11:43[CSS] CSS 기본 선택자(tag 선택자, 전체 선택자(*선택자), 혼합 선택자)

1. 선택자란? - 특정 항목(HTML)을 선택하여, 해당 항목의 속성을 변경. 1) tag 선택자 : 특정 태그(HTML)를 선택하여, 해당 태그의 속성을 변경. 선택자(특정 태그 명) + { 설정 } 제목입니다 본문입니다 제목입니다 본문입니다 또 하나의 DIV 입니다 2) 다중 태그 선택 : 여러 태그를 선택하여, 해당 태그의 속성을 변경 선택자,선택자,선택자 + { 설정 } cf) 특정 태그에 다중 설정시 가장 마지막으로 설정된 값으로 홈페이지 반영됨. MY HOMEPAGE HTML5 CSS3 JAVASCRIPT JQUERY What is HTML5? HTML5 is goooooooooooooooooooooooooooooooooooooooooooooooooooooooood! xxx주식회사 서울시 0..

[HTML] 이미지를 나타내는 태그(img)
Web_Frontend/HTML & CSS2021. 11. 4. 14:08[HTML] 이미지를 나타내는 태그(img)

1. 이미지를 나타내는 태그 웹사이트에서 이미지를 출력해주는 태그 1) img(image) 태그 : 이미지 출력을 위한 태그 - 별도의 종료 태그 없음 2) src(source) : 이미지 파일의 경로 표시 / img 태그 필수속성 - 사이트 파일 내에 위치한 이미지 파일의 경로 - 원격지에 위치한 파일 3) img 태그 기타 속성 (1) alt(alternate) 속성 : 이미지 파일이 없을 시 교체(대신)하여 출력할 문구 (2) width 속성 : 너비(가로 길이) (3) highth 속성 : 높이(세로 길이) (4) border 속성 : 경계선 설정(사각형 모양) 및 굵기 (5) alt 속성 : 그림 설명(그림 위에 포인터 위치시 풍선 도움말) (6) (2)~(5) + align, hspace, v..

[WEB] WEB, HTML, CSS란?
Web_Frontend2021. 10. 29. 14:24[WEB] WEB, HTML, CSS란?

(참조 : https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C/lecture/514) 실전 HTML & CSS 강좌 - 인프런 | 학습 페이지 지식을 나누면 반드시 나에게 돌아옵니다. 인프런을 통해 나의 지식에 가치를 부여하세요.... www.inflearn.com 1. WEB 이란? web이란, 사전적 의미로 거미줄이란 뜻으로 IT에서 WWW(World Wide Web)라는 말의 줄임말로 사용된다. 그 주목적은, 전 세계의 컴퓨터들을 네트워크로 연결하여 정보공유를 하는데 있다. 그리고 컴퓨터들이 연결되어있는 상태를 네트워크에 연결되어 있다고 표현한다. 네트워크, 즉 인터넷으로 컴퓨터들을 네트워크에 연결하는 여러 서비스들 중 하나가 웹(Web, WW..

image