HTML10 [HTML]자바스크립트로 객체 불러오기 getElementById / getElementByClassName 함수!! Id나 class 명으로 요소 불러오는 역할을 한다. 쟤네를 이용해서 객체를 호출할 것. 둘의 차이점은!! Id는 중복을 허용하지 않는다. ** Id와 class는 이름이 같아도 된다. 그래도 똑같이 안 할거다..내가 헷갈리니깐..** https://stackoverflow.com/questions/3253775/css-class-and-id-with-the-same-name CSS class and id with the same name Is there anything wrong with having a css class and id with the same name? Like .footer for the article/po.. 2023. 1. 25. [HTML]Font Awesome 아이콘 넣기 사용 방법은 두 가지 1. 다운로드 받아서 사용 https://fontawesome.com/v5/download Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 그리고 head 태그에 아래 링크 복붙~ 2. CDN 이용 간편하지만 FontAwesome 사이트가 다운되면 이 폰트들이 적용된 웹사이트에도 영향이 간다. head태그에 아래코드 복붙~ 적용 방법은 아래로 동일하다! 그리고 FontAwesome 5버전 페이지의 icon메뉴로 들어간 후 https://.. 2023. 1. 19. [HTML] 반응형 레이아웃 + 미디어쿼리,flexbox 반응형 웹을 만들 때 head 태그에 들어가야할 내용 안 넣는다면 산에서 노 젓는거랑 똑같은 상황. 미디어쿼리 @media screen and (max-width: 1200px){ .main-title { font-size: 20px; } } //대부분 css파일 가장 하단에 적음 //브라우저 폭이 1200px이하일 경우 해당 폰트사이즈를 적용한다는 코드 여러개 적기 가능 @media screen and (max-width: 1200px){ .main-title { font-size: 30px; } } @media screen and (max-width: 768px){ .main-title { font-size: 20px; } } 위처럼 스타일이 중복된다면 더 하단에 있는것이 우선 적용됨. 보통 기재 순.. 2023. 1. 19. [HTML]단위 단위 이름 cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 상대 길이 단위 상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있음. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있음. 웹 개발에 가장 유용한 단위가 아래 표에 나열되어 있다. em 요소의 글꼴 크기. /부모 요소 ex 요소 글.. 2023. 1. 19. [HTML]부트스트랩+그리드 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크!! https://getbootstrap.kr/ Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects.. 2023. 1. 15. [HTML]의미론적 태그 HTML 5부터 제공되는 태그 시맨틱 요소는 브라우저와 개발자 모두에게 그 의미를 명확하게 설명. 비의미적 요소 의 예 : 및 - 내용에 대해 아무 것도 알려주지 않는 반면 의미론적 요소 의 예 : , 및 - 내용을 명확하게 정의. 일반 div들과 구별이 됨. 수많은 div들 중에서도 nav, main, footer로 구별을 하기가 쉽다!! TagDescription Defines independent, self-contained content Defines content aside from the page content Defines additional details that the user can view or hide Defines a caption for a element Specifies sel.. 2023. 1. 14. [HTML]실습하기 좋은 웹사이트 https://replit.com/~ Log In Run code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter. replit.com 브라우저에 적용되는 것을 편리하게 볼 수 있다!! https://flatuicolors.com/palette/defo Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨 280 handpicked colors ready for COPY & PASTE flatuicolors.com 원하는 색상을 클릭해서 가져올 수 있다! https://fontawesome.com/icons.. 2023. 1. 2. [HTML]태그 : 웹서버와 웹브라우저 사이에 주고받는 정보를 정의하는데 사용됨. 문서 자체의 특성을 나타냄 : 상단 tab에 title 지정함 이 부분이 tab에 나타남 : 필요한 스타일이나 아이콘 등 외부 문서를 html문서에 연결시킴 이 부분을 수정해야할 경우는 거의 없다. : 영역을 나누는데 쓰임 div 태그와 달리 줄바꿈없이 영역만 나누는 span태그를 기억합시다 : 영역을 나누는데 쓰임 안녕하세요 로또 당첨 되게 해주세요 : 문단을 나누는데 쓰임 (div태그와 차이점은 p 이 친구의 공간이 좀 더 많이 생김) 문단1 : 글자를 기울여서 표시하는 태그로, italic의 약자 기울여서 표시 할 내용 예제처럼 외부에서 소스를 가져올 때 이 태그가 쓰임. 이 태그를 사용할 시 태그안에 CDN (content deli.. 2023. 1. 2. [HTML] 레이아웃 margin과 padding의 차이 .margin-left : border 바깥쪽에서 왼쪽에 여백을 만듦 .padding-left : border 안쪽에서 왼쪽에 여백을 만듦 top, right, bottom, left에 여백을 만들 수 있음 공간이 여백을 포함한 크기로 변경되는 점 유의 좌우를 모두 auto로 설정하면 가운데 정렬이 됨. 근데~! margin : auto는 block요소에서만 사용이 가능하다. padding은 auto 사용이 불가능하다. 미스터 에일리언 : 'auto는 padding 속성에 유효한 값이 아닙니다. padding: 0을 빼는 것이 유일한 방법입니다. * 선언에서 그렇지 않으면 단순히 각 속성 블록에 패딩을 할당합니다.' https://stackoverflow.com/que.. 2022. 10. 3. [HTML] HTML의 기초 Hyper Text Markup Language 를 의미하는 HTML은 웹사이트에서 눈에 보이는 정보 혹은 특정한 구역을 설정할 때 사용되는 언어 HTML의 태그 구성 요소 : 컨텐츠 태그명 : HTML이 갖고 있는 고유의 기능 속성 : HTML 태그가 갖고 있는 추가 정보 속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것 : HTML5라는 신조어로 문서를 선언하는 태그 ... : HTML문서의 시작과 끝을 의미 : 웹사이트의 간단한 요약정보를 담는 영역 (노출되지 않는 정보) ... : 웹사이트에서 눈에 보이는 정보를 담는 영역 (이미지나 텍스트 처럼 출력되는 정보) : character setting의 약자를 나타내는 문자코드 ... : 웹사이트 탭에 나타내는 제목을 적는 태그 ... : .. 2022. 9. 30. 이전 1 다음
