radio 태그와 select 태그의 차이점

select는 여러개를 선택할 수 있는 방면에 radio는 배타적, 즉 단일선택만 가능하게 해주는 태그이다

• format_list_bulleted 국비과정/HTML & CSS
• · 2022. 3. 21.
• textsms

HTML 유용한 태그 정리(

미친듯한 성능 1. CSS를 적게 작성하는데 도움을 주는 태그 ▶ progress 태그 : 현재 진행상태를 알려주기 좋은 태그 2. JS로의 기능을 수행할 수 있는 태그 ▶ detail,summary 태그 :유저의 클릭으로 정보를 보여주고. 숨기는 패턴 클릭 전 보여질 내용 클릭 후 보여질 내용 ※open이라는 CSS선택자를 통해 스타일 변경가능 3. input type "week", "time" :달력을 만들 때 편리한 input type ※윈도우 환경에 따라 위젯의 형태는 달라짐 4. picture태그 : 각기 다른 버전의 이미지를 표시가능 ex)PC에서는 그림이 고화질로 웹에서 보여지나, 모바일에서는 빠른 실행 속도를 위해 저사양으로 보여지도록 설정가능 5. datalist태그 : JS작성 없이 A..

• format_list_bulleted 국비과정/HTML & CSS
• · 2022. 3. 10.
• textsms

이클립스와 VSC (비주얼 스튜디오 코드) 연동하여 사용하는 법 - 최종

Java를 작업하기엔 이클립스가 최적화되어 있지만 CSS나 HTML, JS 등을 작업할 때는 VSC의 extention을 사용하여 작업하는 것이 효율적이다. 아래의 순서만 따라하면 VSC에서 사용하고 이클립스로 자동 저장이 되어 매우 편리! 1. VSC 다운로드 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor,..

• format_list_bulleted 국비과정/HTML & CSS
• · 2022. 3. 9.
• textsms

HTML tag 종류 (in-line tag, blocked tag)

HTML의 blocked tag와 in-line tag 종류 Here are the block-level elements in HTML: Here are the inline elements in HTML: 참조: https://www.w3schools.com/html/html_blocks.asp

• format_list_bulleted 국비과정/HTML & CSS
• · 2022. 3. 8.
• textsms

HTML에서 css파일, JavaScript 파일 연결하는 방법

HTML에서 css파일을 연결할 때 - head안에 삽입한다 HTML에서 js를 연결할 때 - head와 body 둘다 삽입 가능하다. JS를 연결할 때 주의해야 할 점: Body와 Head안, 둘다 쓸 수 있지만 브라우저가 HTML을 해석하던 도중 script를 만나면 렌더링을 중단하게되므로 속도가 저하될 우려가 있다. 따라서 무거운 JS파일은 Body안에 삽입하고 가벼운 파일은 Head안에 삽입하여 사용한다. 참조: https://zion830.tistory.com/29

• format_list_bulleted 국비과정/HTML & CSS
• · 2022. 3. 8.
• textsms

기기별 해상도 - 반응형 웹 설정하는 법 (@media)

px to rem 꿀팁 사이트: https://codebeautify.org/rem-to-px-converter 낮은 해상도의 PC, 태블릿 가로 : ~1024px = 64rem 테블릿 가로 : 768px ~ 1023px = 48rem 모바일 가로, 태블릿 : 480px ~ 767px = 20rem ~ 30rem 반응형 웹을 사용하기 위해 @media를 CSS파일에 따로 설정해주어야한다. {} 대괄호 잊지말고 사이즈별로 따로 설정해주어야 반응형 웹이 설정됨. @media (max-width:48rem) { /* 해상도가 48rem 즉768px보다 작으면 (max 까지) font size를 0.8rem으로 변경 */ .container{ font-size: 0.8rem; } .content{ font-si..

• format_list_bulleted 국비과정/HTML & CSS
• · 2022. 3. 6.
• textsms

CSS flex box의 정의, 사용 방법 & 반응형 웹사이트 (position)

flex box flex box는 웹페이지를 만들 때 div같은 blocked 태그들의 위치를 자유롭게 조절하게 도와준다. 여러가지 기능들을 사용하기 위하여 CSS파일에 미리 flex를 선언해주어야 기능을 사용할 수 있다. 아래의 함수를 원하는 태그에 적용하면 사용 가능 display : flex; flex box 기능 리스트 justify-content = 컨테이너의 위치 간격 등을 조정 = space-evenly, space-around, space-between 등 align-items = 컨테이너의 위치 조절 align-single = 컨테이너의 위치를 무시하고 단독 위치 조정 flex-wrap = 값이 웹페이지 밖으로 넘어갈 때 자동 줄바꿈 flex-difinition = 기준 축을 바꿔주는 기..

• format_list_bulleted 국비과정/HTML & CSS
• · 2022. 3. 6.
• textsms

CSS 태그 종류 정리 (ol, ul, dl, li )

CSS 태그 - ol, ul, dl, li ol: ordered list - 순서를 고려하는 리스트 ul: unordered list - 순서를 고려하지 않는 리스트 dl: definition list - 사전과 같은 뜻을 정의해주는 리스트 위의 3개의 태그는 in-line text 형식의 태그로 div와 같은 blocked 태그처럼 줄바꿈이 생기지 않는다. 위의 태그 안에 li - list item 태그를 사용하여 아이템 데이터를 정의해줄 수 있다. 사용 예시: 1 2 1 2 1 2 출력문: 1 2 1 2 12

• format_list_bulleted 국비과정/HTML & CSS
• · 2022. 3. 6.
• textsms