프론트엔드/HTML CSS 7

html <label>, <small> 태그 정리

백엔드 인턴으로 입사하였지만 현재는 프론트엔드 교육을 받기때문에 html, css, javascript를 하고있다 오늘은 , 태그를 정리할것이다 뜬금없이 둘을 정리하는 이유는 ,, html코드를 보는데 이 두개의 태그만 낯설어서 하게 되었다 폼의 양식에 이름을 붙이는 태그 for 속성을 사용하여 다른 요소와 결합할 수 있으며 이때 요소의 for 속성값은 결합하고자하는 요소의 id 속성값과 같아야지 연결이 가능하다. label은 브라우저에 의해 일반적인 텍스트로 랜더링되지만 클릭하면 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나 해제까지 한다. 아이디 text가 아닌 아이디를 클릭했는데 text창이 강조되는걸 볼 수 있다 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타내는 태그 아이..

인턴 교육 시작 + <fieldset> , <table> 태그 정리

오늘부터 본격적인 교육이 시작된다 틈틈히 기록해야지 ! 요소 : 웹 양식의 여러 컨트롤과 레이블()을 묶을 때 사용함. 요소로 그룹의 설명을 제공할 수 있음 *특성 disabled : 지정한 경우, 모든 자손 컨트롤 비활성화되므로 편집 불가능 단, 안의 양식 요소는 비활성 상태로 전환되지 않음 form : 요소와 연결할 요소의 id name : 그룹과 연관지을 이름 Disabled fieldst Name: 비활성화 된 을 볼 수 있따 순서가 있는 목록을 만들때는 ol 의미없는 목록을 만들때는 ul 항목은 li 태그 : 테이블을 만드는 태그 : 테이블의 헤더부분을 만드는 태그 테이블의 행을 만드는 태그 테이블의 열을 만드는 태그 * 와 의 개수는 동일한 것이 좋고 값을 비워야한다면 로 열을 생성 후 , 값..

css 기초 개념 정리

다시 공부하려고 정리하는 뒤죽박죽 css 기초 개념 text-decoration-line none : 꾸밈 없음 underline : 텍스트 아래 밑줄 overline : 텍스트 위에 줄 line-through : 텍스트 중간 선 text-decoration-color 라인의 색 text-decoration-style 선의 모양 solid: 굵은 선 wavy : 물결모양 dotted : 점선 dashed: 짧은 막대선 double: 이중선 font 크기 font-weight: normal; 과 font-weight: 400; 과 같고 font-weight: bold; 과 font-weight: 700;은 같음 굵기는 100 ~ 900 까지 있음 ( 100 단위 ) 폰트에 따라 지원되는 크기는 다름 div..

[HTML/CSS] CSS 파일을 적용하는 방법

CSS는 웹 사이트의 스타일링을 담당하므로 빼놓을 수 없는 요소다. HTML에 적용하는 3가지 방법에 대해서 알아보자 :D 1. 내부 스타일 시트 ( 에 입력 ) class와 id class: 여러개를 묶어서 효과지정이 가능하다. id: 하나만 가능하다. 대신 고유성을 줄 수 있다. 그동안 올린 게시글에서 항상 썼던 방식이다. html파일 안 에 있는 태그 안에 적으면 된다. 2. HTML 태그에 적용하기 class와 id class: 여러개를 묶어서 효과지정이 가능하다. id: 하나만 가능하다. 대신 고유성을 줄 수 있다. 직접 태그 안에 style=""을 적어서 입력하는 방식이다. 개인적으로는 지저분해 보이고 한 눈에 안 들어와서 별로 안 좋아하는 방식 ! 3. 외부 스타일 시트 마지막 방법은 직접 ..

[HTML/CSS] 기초 개념 ③ 클래스(class), 아이디(id)

클래스 지정하기 클래스는 보통 효과를 따로 주고싶을 때 사용한다 클래스 사용하기 /*클래스 이름은 first*/ class = "클래스 이름" 을 입력하고 클래스 사용하기 두 개의 클래스를 사용하고 싶다면 class=" 클래스 이름명1 클래스 이름명2" 처럼 띄어쓰기만 하고 적어주면 된다 아이디(id) 사용하기 클래스는 . 을 쓰지만 아이디는 #을 적는다. 아이디를 배워보자 이렇게만 보면 .과 #의 차이빼고는 비슷해보이지만 클래스는 중복이 가능하고 아이디는 중복이 불가능하다는 차이점이 있다. 클래스는 여러 태그에 붙여서 연관성과 통일성을 부여할 때 활용할 수 있고 아이디는 하나의 태그에만 붙여서 고유성을 줄 수 있다. 예시 class와 id class: 여러개를 묶어서 효과지정이 가능하다. id: 하나만..

[HTML/CSS] 기초 개념 ② 링크 넣는법 <a> , 이미지 넣고 가운데 정렬..

웹사이트에 링크 넣는 법 HTML에 대해서 알아보자 구글 위의 코드처럼 주소이름을 입력하면 된다. 주소 이름 부분에는 내가 원하는대로 적으면 된다 !여기서 탭이 따로 열리길 바란다면 target="_blank"을 덧붙이면 된다. 웹사이트에는 이렇게 반영되는 것을 볼 수 있다. 만약에 웹사이트가 아닌 내가 가지고 있는 html파일로 이동하길 원한다면 파일경로를 적어줘야한다. 파일이름 을 입력하면 된다. 대신 자신과 같은 폴더에 있는 html파일로 이동할땐 따로 폴더명을 안 적어도된다 ! 저 위에 practice.html가 그 예시이다. 하지만 폴더가 다를 경우는 경로를 다 적어줘야한다. 또한, 자기자신에게 링크를 걸때는 17번줄처럼 #만 입력하면된다. 웹사이트에 이미지 넣는 법 난 저작권이 없는 무료이미지..

[HTML/CSS] 기초 개념 ① <b>,<i> , 주석 ...

HTML/CSS 이란? ● HTML [HypertextMarkupLanguage] : 웹 문서를 만들기 위한 기본적인 언어 ● CSS [cascading style sheets]: 웹 문서의 전반적인 스타일을 저장해둔 스타일 시트 HTML 기본 태그 (요소) : 웹 브라우저에게 HTML버전을 알려주는 역할 ( 적을시, 자동으로 html5 사용) : 웹 사이트의 제목 : 가장 큰 머리말 (heading 1) : 두 번째로 큰 머리말 (heading 2) : 문단 HTML 기초 태그 : 텍스트를 굵게 만들어줌 ( bold ) HTML을 배워보자 : 텍스트를 날려줌 ( italic ) HTML을 배워보자 : 태그와 똑같이 굵게 표시됨. 감싸고 있는 텍스트가 중요하다고 표시하는것이 목적임 : 태그처럼 날려써짐...