Frontend57 02. CSS 스타일을 적용하는 3가지 방법(Inline CSS, Internal CSS, External CSS) ○ Inline CSS - 스타일을 적용할 부분의 여는 태그 안에 바로 적용 - 형식 : style="속성1: 속성값; 속성2: 속성값; ..." HTML 삽입 미리보기할 수 없는 소스 ○ 선택자(Selector) - 스타일을 적용하기 위한 대상 - HTML요소를 사용할 수도 있고 ID, Class의 형태로 정의할 수도 있다 - 유형 ① 태그(HTML 요소) ② #선택자 이름 : 본문에 적용할 때 id="선택자이름" (선택자이름을 한번만 적용할 수 있다) ③ .선택자 이름 : 본문에 적용할 때 class="선택자이름" (선택자이름을 여러번 적용할 수 있다) ○ Internal CSS - 내부 스타일 시트(internal CSS) : HTML 문서 안에 태그로 해당 문서에서 사용할 스타일을 정리 - 보통 .. 2022. 3. 28. 01. CSS 기본문법 ○ UI 구현 표준(WEB)의 구성요소 ① 웹표준 : 웹기술을 표준화하기 위한 일련의 단계와 요구사항 ② 웹접근성 : 어떠한 사용자, 어떠한 기술 환경에서도 사용자가 전문적인 능력없이 웹사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것 ③ 웹호환성 : 서비스 이용자 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공하는 것 ○ 웹(WEB)의 3요소 ① 구조 : HTML ② 표현 : CSS ③ 동작 : Java Script, 웹 프로그래밍 언어(JSP, ASP, PHP, Python 등) ○ CSS ; Cascading Styles Sheets - 웹 문서의 표현, 서식, 일관성 유지 - 명령어는 대소문자를 구분한다 - 종결문자 ; - 주석 : 여러줄 /* */ , 1줄.. 2022. 3. 28. 07. HTML 레이아웃(Layout) & 시맨틱(Semantic) ○ HTML 레이아웃(Layout)과 시맨틱(Semantic) 태그 - : 콘텐츠를 묶어 시각적 효과(CSS)를 적용할 때 중요하게 사용됨 - HTML구조를 만들때 , 태그 외에 시맨틱(Semantic) 태그 사용 권장 - 시맨틱(Semantic) : '의미가 통하는'이라는 뜻, 태그만 보고도 페이지 구조를 쉽게 파악할 수 있도록 함 - 웹사이트 주요 구조 : 헤더(header), 본문(contents), 사이드바(sidebar), 푸터(footer) 등 ○ 시맨틱(Semantic) 태그 - 시맨틱 태그는 일반 태그와 달리 HTML구조에 의미를 부여할 뿐 실제 출력에 영향을 주진 않는다 ① : 머리말 영역 지정, 주로 페이지의 맨 위쪽이나 왼쪽에 삽입 ② : 네이게이션 역할, 동일한 사이트 안의 문서나 .. 2022. 3. 27. 06. HTML 블록(Block)요소와 인라인(Inline)요소 ○ 블록(block) 요소 / 블록 레벨 태그 - 특정영역에 대해서 블럭을 지정 - 내용의 크기와 상관없이 정해진 크기를 가지고 있음 - , , 등 ○인라인(inline) 요소 / 인라인 레벨 태그 - 내용의 크기가 곧 영역의 크기 - , , 등 ○ 블록 요소와 인라인 요소의 크기 비교 - 블록 요소는 텍스트 내용의 길이와 상관없이 정해진 영역 모두 자신의 영역 (한 줄의 배경색이 모두 변함) - 인라인 요소는 텍스트 내용의 길이가 곧 자신의 영역 (텍스트 부분만 배경색이 변함) 블록요소 DIV 블록요소 BLOCKQUOTE 블록요소 PRE 인라인요소 STRONG 인라인요소 SPAN HTML 삽입 미리보기할 수 없는 소스 2022. 3. 26. 05. HTML 폼(Form) 관련 태그들 ○ 폼(Form) - 폼(Form) : 사용자가 웹 사이트로 정보를 보낼 수 있는 요소 사용자가 입력한 값을 전송해 준다 (e.g. 로그인창, 회원가입창, 검색창 등) - 사용자가 입력한 정보는 단위로 서버로 전송된다 - 폼을 만드는 태그 : - 폼 태그 안에 또 다른 폼 태그가 올 수 없다 ( → 잘못된 경우 ) - 태그 안에 여러 폼 컨트롤 요소를 넣어준다 ○ 폼 관련 속성들 - id="폼아이디" : 여러 폼이 있을 떄 구분하기 위해 사용 (주로 Frontend단에서 접근시 사용) - name="폼이름" : 여러 폼이 있을 떄 구분하기 위해 사용 (주로 Backend단에서 접근시 사용) - method="post/get" : 전송방식 (post : 전송내용이 URL에 드러나지 않음 / get : 전송.. 2022. 3. 25. 04. HTML 표 작성 태그 ○ 표(Table) 작성 태그 - 표를 이루는 요소 : row(행), column(열), cell(셀, 행과 열이 만나 이루는 영역) - 표를 만드는 태그 : , , , - 표 만드는 순서 ① : 테이블의 처음과 끝을 만든다 ② : ①번 안에 행을 만든다 ③ , : ②번 안에 열을 추가해 셀을 만든다 ( : 제목셀 / : 일반셀) ④ ③번의 여는 태그와 닫는 태그 사이에 셀 안에 들어갈 내용을 입력한다 이름 주소 손흥민 영국 런던 ↓ HTML 삽입 미리보기할 수 없는 소스 - 표 크기 조절 : 태그에 속성값을 준다 ( width="가로크기" height="세로크기" ) 이름 주소 황의조 프랑스 보르도 - 표 정렬 : 가로 (align), 세로(valign) 가로정렬 왼쪽 가로정렬 중간 가로정렬 오른쪽 세.. 2022. 3. 25. 이전 1 ··· 6 7 8 9 10 다음
