본문 바로가기

프론트엔드 개발

[HTML] CSS 적용 방법과 선택자들 1.CSS 적용방법 (1)인라인 스타일 (inline style) 태그 안에 css 구문을 적어넣는 스타일 > 재사용이 불가하고, HTML과 CSS가 분리되지 않기에 비추 (2) 내부 스타일 시트 (internal style sheet) HTML 페이지 내부 Head 태그 안에 style 태그를 두고 그 안에 CSS 코드 작성하는 방식 > 재사용이 가능하나, CSS 코드가 많아질수록, HTML 작성하기가 복잡해짐. (3) 링킹 스타일 시트 (linking style sheet) 외부 CSS 파일과 HTML 문서를 연결하는 것 CSS와 HTML이 분리 되어서 가독성 좋고, 하나의 CSS 파일을 여러 HTML 문서에서 참조할 수 있으므로 편함. 2. 선택자들 (0). 특징 * 똑같은 선택자에 관한 것일 경우.. 더보기
[HTML] 기타 활용되는 태그 1. pre 태그 (1) 코드 pre 태그 pre 태그에 텍스트를 작성하면 스페이스, 탭, 엔터 등 모든 공백 요소들이 이와 같이 화면에 그대로 적용됩니다. 때문에 pre 태그는 아래의 아스키 아트(Ascii art)들처럼 공백요소들을 적극 활용해야 하는 경우 유용하게 사용될 수 있습니다. ,d888a ,d88888888888ba. ,88"I) d a88']8i a88".8"8) `"8888:88 " _a8' .d8P' PP .d8P'.8 d) "8:88:baad8P' ,d8P' ,ama, .aa, .ama.g ,mmm d8P' 8 .8' 88):888P' ,d88' d8[ "8..a8"88 ,8I"88[ I88' d88 ]IaI" d8[ a88' dP "bm8mP8'(8'.8I 8[ d88' `" .8.. 더보기
[HTML] 사용자로부터 입력 받기 3 1. textarea 태그 textarea 태그 메시지를 입력하세요. 2. 옵션을 사용하는 태그 (1) select,option 태그 옵션들을 사용하는 태그 select, option 태그 언어 -- 언어 선택 -- HTML CSS 자바스크립트 타입스크립트 (2) optgroup 태그 optgroup 태그 쇼핑 목록 사과 포도 오렌지 당근 토마토 가지 소고기 돼지고기 닭고기 (3) datalist 태그 datalist 태그 현재 직업 3. 정도를 표현하는 태그 (1) progress 태그 정도를 표현하는 태그 progress 태그 0% (2) meter 태그 meter 태그 20달러 4. 스스로 해보기 더보기
[HTML] 사용자로부터 입력 받기 2 1. 텍스트 관련 인풋 타입 텍스트 관련 인풋 타입 text password search tel 제출 (1)텍스트 관련 인풋의 속성들 placeholder는 빈 칸에 보이는 안내문이다. maxlength는 적을 수 있는 최대 길이다. 그 이상 적으면 자동으로 짤린다. minlength는 적어야할 최소 길이다. 위반 시 submit이 거부된다. 2. 숫자 관련 인풋 타입 숫자 관련 인풋 타입 number range date HTML 삽입 미리보기할 수 없는 소스 (1)숫자 관련 인풋 속성들 min, max: 해당 칸에 적을 수 있는 숫자 값의 최대, 최소를 나타냄. (date 등 타입에 따라 형식이 다를 수 있음.) step: range 타입에서 한번에 갈 수 있는 간격을 뜻함. (위에선 20으로 설정했음.. 더보기
[HTML] 사용자로부터 입력 받기(1) 1. 기본 형태 (1) form 태그 정보를 제출하기 위해 필요한 태그들이 모두 form 태그안에 포함된다. *형식 (2) input 태그 입력을 받는 요소 (3) label 태그 인풋 요소마다 붙어 있는 라벨 **필요한 이유? for 속성값을 인풋 요소의 id랑 맞춰 연결 시킴. 이렇게 되면 label을 클릭할 경우 자동으로 연결된 input으로 가게 됨. 인풋의 클릭 영역을 확장 시킴 label의 이름 (4) button 태그 type 속성은 각 각 submit(목적지로 제출), reset(초기화) button(기본동작 없음)이다. button 속성일 경우 백엔드 작업으로 해당 버튼 클릭 했을 때 다른 동작 이어지게 만들어 주면 된다. 제출 초기화 버튼 2. 폼 태그 내의 입력요소 & 라벨들 그룹화 .. 더보기
[HTML] 링크 사용 1.기본 형태 누를 내용(ex - ~로 가기) (1) target의 속성 값 Target의 속성 값 설명 비고 _self 현재 창에서 연다. 이게 default _blank 새 창에서 연다. 텍스트나 이미지 누르기일 경우 alt에 이거 새창에서 열린다고 명시 필요! 시각 장애인들은 이게 새창에서 열리는지 모른다. _parent 부모 프레임에서 열린다. (창 속의 창일 경우) 사용 시 사용 _top 최상위 프레임에서 열린다. (창 속의 창이 거듭될 경우 ) 사용 시 사용 2. 이미지 눌러서 링크 이동 3. 해당 페이지의 특정 부분으로 이동 위키피디아 같이 페이지가 문단 별로 구분되어 있고, 목차를 누르면 해당 문단으로 이동한다고 해보자. (1) 특정 문단을 지정하면 올 수 있는 타겟으로 만들기 텍스트 (2.. 더보기
[HTML] 표 사용하기 1. 기본 형태의 테이블 작성 1행 1열의 데이터 값 1행 2열의 데이터 값 1행 3열의 데이터 값 1행 4열의 데이터 값 2행 1열의 데이터 값 2행 2열의 데이터 값 2행 3열의 데이터 값 2행 4열의 데이터 값 2. 제목 행, 꼬리 행 있는 경우 table의 머리부분, 몸통부분,꼬리부분의 정보를 나눠 줘야한다. 각각 thead, tbody,tfoot으로 정보를 나누고 그 안에 열과 행을 적는다. thead의 데이터 적는 태그는 로 따로 있다. 이는 thead가 대표하는 영역(scope)를 나태내기 위함이다. col은 열, row는 행에 관하여 대표성을 가진다는 것을 뜻한다. 과목 월 화 수 HTML 60분 60분 60분 CSS 30분 30분 40분 JS 10분 100분 200분 총 시간 100분 1.. 더보기
[HTML] 이미지 넣기 1. 문법 (1) 절대 경로와 상대 경로 해당 내용은 src="이미지의 주소"에서 이 주소에 들어가는 내용임. 절대 경로는 인터넷에서 이미지 긁어올떄, http 주소임. 내가 html 파일을 어디서 적고 있든 바뀌지 않음. 상대 경로는 지금 쓰고 있는 html 파일 위치를 기준으로 이미지 파일이 내 어느 폴더에 저장되어 있는지를 나타내는 상대적인 주소임 **참고 ./ 현재 디렉토리, ../ 부모 디렉토리 2. 스스로 해보기 HTML 삽입 미리보기할 수 없는 소스 더보기

티스토리툴바