본문 바로가기
728x90

coding

[HTML/CSS] 하이퍼링크 생성하기 웹 사용이 더욱 편리해지는 '링크' 하이퍼링크 생성하기 클릭으로 연결된 곳에 즉시 이동하여 웹 사용을 더욱 편리하게 해준는 기능 링크 태그 a 태그 - 링크 생성 해당 페이지에서 다른 페이지로 이동 시 사용 텍스트 or - 앵커 생성 a태그와 id 속성을 이용하여 한 페이지 내에서 링크 만들 수 있음, 내부 링크를 통해 그 곳으로 이동 내용 - 다운로드 링크 생성 다운로드할 수 있는 링크를 생성. #을 사용하면 해당 파일의 페이지(#page=페이지 번호)나 북마크(#bookmark)를 이용해 열 수 있음 텍스트 TIP! 서버에 올렸을 때 브라우저에 따라 오류가 있는 경우가 있습니다. 해서 복잡한 것 말고 간단한 다운로드의 경우 이용합니다. 오류 - 다운로드 받은 파일이 깨져있을 수 있습니다 - 브라우저에.. 더보기
[HTML/CSS] 멀티미디어 삽입하기 텍스트와 이미지뿐만 아니라 오디오, 비디오 등 멀티미디어를 넣을 수 있게 되므로써 웹 페이지가 더욱 풍성해졌습니다 멀티미디어 삽입하기 과거 웹 브라우저에서 직접 재생할 수 없어 플러그인에 의존 플러그인 사용하기 외부파일 삽입하기 1. object 태그 웹 브라우저에서 직접 재생할 수 없는 자바 애블릿, PDF파일 같은 콘텐츠를 포함 시킬 때 사용 기본 구조 예시 2. embed 태그 웹 브라우저에서 직접 재생할 수 없는 콘텐츠를 포함 시킬 때 사용 주로 이전 브라우저에서 사용 기본 구조 예시 비디오 코덱 인코딩과 디코딩을 수행하는 것 - 인코딩 : 원본 비디오를 압축해 컴퓨터에서 사용가능한 비디오 파일로 변환하는 과정 - 디코딩 : 비디오 파일에 저장되어 있는 비디오 정보를 불러와 플레이어에 보여주는 과.. 더보기
[CSS] 폰트 스타일 알아보기 (Fonts) 웹 사이트에 적합한 글꼴를 사용하는 것은 브랜드의 아이덴티티를 구축하고, 가독성을 높여 사용자가 이용하기 보다 편리해집니다 폰트 FONTS ● Web Safe Font 브라우저나 기기에 기본적으로 설치되어있는 폰트 글꼴이 설치되어 있지 않거나 정상적으로 설치되지 않은 경우도 있기때문에 100% 안전한 웹 세이프 폰트는 없습니다 그렇기에 백업 폰트에 폴백 폰트를 작성해야합니다. html,css에서 가장 사용하기 좋은 웹 세이프 폰트 목록 Arial, Verdana Helvetica Tahome Trebuchet MS Times New Roman Georgia Garamond Courier New Brush Script MT ● Fallback Font 범용 글꼴 범용 글꼴 패밀리 목록 Serif : 가장 .. 더보기
[CSS] 구글 웹 폰트 사용하기 (Google Fonts) [무료 웹 폰트] 구글웹폰트 사용하는 방법을 알아보자! 웹 사이트 제작 시 웹 사이트에 적합한 글꼴을 사용하는 점이 중요합니다. 하지만 어떤 폰트를 사용하면 좋을 지 고민이지 않으신가요? 그렇다고 아무 곳에서 다운 받아서 쓰기에는 용량도 걱정되고, 저작권에 걸리지 않을까 걱정되기도 합니다. 유료로 구매하여 사용할 수 있지만 이번에는 무료 폰트 사이트 중 구글웹폰트에 대해 알아보겠습니다. 구글웹폰트 (Google Fonts) 웹에서 폰트를 불러와 웹 사이트에 적용할 수 있는 사이트 장점 무료 폰트 상업적 이용 가능 용량이 줄어듬 어느 플랫폼에서 사이트를 열어도 동일한 웹폰트 제공 구글웹폰트 사용하기 구글웹폰트 사이트 : https://fonts.google.com/ 1. 폰트 선택하기 구글웹폰트 사이트에서.. 더보기
[CSS] 컬러 관련 CSS (Color) 컬러 속성 (Color) 컬러 지정 방법 ● color name 작성 브라우저에서 지원되는 색상의 이름을 작성하는 방법 ● rgb값 작성 RGB 색상의 기본색(Red, Green, Blue)을 각각 0부터 255까지의 범위의 값으로 지정한 것 웹 디자인에 많이 사용됨 HTML 삽입 미리보기할 수 없는 소스 ● hex값 작성 rgb값을 각각 00~ff까지 16진수로 나타낸 것 ● hsl값 작성 컬러, 채도, 명도를 %로 나타낸 것 브라우저에서 지원되는 color name 보러가기 컬러 적용 속성 배경 컬러 지정하기 - background 배경을 지정하는 속성 - background-color 배경을 지정하는 속성인 background 중 컬러를 지정하는 속성 background background-colo.. 더보기
[CSS] CSS 선택자 (Selector) CSS 선택자 (Selector) HTML에서 스타일을 적용하고 싶은 요소를 선택하는 것 선택자 분류 단순 선택자 (Simple selectors) 요소명, class명, id명 등으로 선택하는 가장 기본적인 선택자 콤비네이션 선택자 (Combinator selectors) 단순 선택자의 관계에 근거하여 선택하는 선택자 가상 클래스 선택자 (Pseudo-class selectors) 요소의 특정 상태에 따라 선택하는 선택자 가상 요소 선택자 (Pseudo-elements selectors) 요소의 지정부분을 선택하는 선택자 속성 선택자 (Attribute selectors) 포함 하고 있는 속성과 속성값에 따라 지정하는 선택자 선택자 종류 1. 전체 선택자 모든 요소에 적용 * { } 2. 요소명 선택자.. 더보기
[CSS] CSS (Cascading Style Sheets) 기본 CSS (Cascading Style Sheets) 스타일 규칙들을 한 눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것 HTML 요소가 화면에 표시되는 방법을 작성한 스타일 시트 CSS 사용 이유 - 작업 시간 단축 html만 사용할 경우 일일이 스타일 지정 - 전체 스타일 제어 css파일은 외부 파일로 저장하여 제어가능 - 유지 보수 편의성 증가 가독성이 증가하므로 유지 보수 시 편함 스타일 시트 원칙 ● 캐스케이딩의 원리 (Cascading) 스타일간의 충돌을 막기 위해 ‘위에서 아래로 흐르며 적용되는 방식’으로, 같은 선택자의 같은 속성명 일 때, 속성값이 다르면 하단의 속성값을 적용 (=top-down방식) ● 스타일 상속 자식요소에서 따로 스타일을 지정하지 않으면 부모요소에 .. 더보기
[HTML] 입력 양식 폼 (Form) 만들기 폼 (form) 사용자의 정보를 입력받을 수 있는 입력 양식 데이터를 입력받고 서버로 전송하는 역할. 페이지당 폼 하나만 사용 동작 방식 폼의 정보 입력 ▶ 서버 ▶ 결과 기본 문법 예시 폼 관련 속성 속성 정의 속성값 정의 action 처리할 페이지 주소 서버프로그램 파일명. (.jpg, .php, .asp) method 처리 방식 서버에 데이터를 넘기는 방식 get 주소줄과 함께 전송 (보안 취약) 크기가 작고 중요도가 낮은 데이터 처리시 사용 post 웹문서와 함께 전송 (보안 양호) 활용성이 좋음 폼 관련 태그 기본 폼 로그인정보 아이디 : 비밀번호 : 비밀번호 확인 : 메모 HTML 삽입 미리보기할 수 없는 소스 1. fieldset 폼 안에서 감싸고 있는 박스 TIP! form 안에서만 사용 .. 더보기
[HTML/CSS] 폰트어썸 (Font Awesome) 사용하기 폰트어썸 기존에 사용하던 아이콘 이미지들을 아이콘폰트라는 개념으로 만들어 사용 할 수 있게해 수정 시 보다 편리해짐 폰트어썸의 장점 용량 문제가 없음 CSS 로 사이즈나 컬러가 변경가능해 수정이 쉬움 벡터이미지로 해상도문제가 없음 폰트어썸 사용방법 1. 폰트어썸 설치하기 - 다운로드해서 연결하기 https://fontawesome.com/ 해당 사이트에서 압축 파일을 다운받고 그 중 all.css 를 link 태그로 연결하기 Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com - CDN으로 연결하기 사이트.. 더보기
[HTML/CSS] 이미지 삽입 / 절대 경로와 상대 경로 이미지 삽입하기 웹에서 주로 사용하는 이미지 파일 형식 파일 형식 설명 JPG / JPEG 사진을 위해 개발된 형식으로 gif보다 다양한 색과 명암표현 저장 시 압축되며 반복저장하면 화질이 떨어질 수 있음 GIF 최대 256색 표현, 투명한 배경, 움직이는 이미지 제작가능 PNG 투명 배경, 다양한 색 표현 (최근 많이 사용) img 태그 기본 구성 예시 img 연결 방식 1. CDN (Contents Delivery Network) 방식 불러오기 사이트에서 이미지를 선택 후 이미지 소스를 복사해 넣는 방식 2. 로컬 컴퓨터 이미지 불러오기 프로젝트 폴더안에 image 폴더를 생성해 다운받은 이미지를 넣고 경로를 작성해 연결하는 방식 더보기
[HTML/CSS] 테이블 만드는 태그 (Table Tag) - 제목 및 설명 테이블 제목 및 설명 태그 웹 접근성과 관련 1. caption 표 제목이나 간단한 요약 및 설명을 나타내는 태그 중앙 정렬, 테이블 태그 안에 작성 AA회사 지원자 명단 이름 나이 성별 김수연 25 여 오재훈 27 남 나연우 32 남 유나희 29 여 HTML 삽입 미리보기할 수 없는 소스 2. figure, figcaption 표의 제목 및 설명을 달아주는 태그 좌측 정렬, 테이블 태그 밖에 작성 AA회사 지원자 명단 이름 나이 성별 김수연 25 여 오재훈 27 남 나연우 32 남 유나희 29 여 웹 퍼블리싱 직무 지원자 HTML 삽입 미리보기할 수 없는 소스 caption 태그와 figcaption 태그의 차이점 1. 위치 caption 태그는 table의 위에 생성 figcaption 태그는 tab.. 더보기
[HTML/CSS] 테이블 만드는 태그 (Table Tag) 테이블 태그 테이블을 데이터를 보기 좋게 정리하여 보여주는 표를 의미 표는 테이블, 가로(row)는 행, 세로(column)는 열, 한 칸은 셀 이라함 테이블 구성 태그 table : 표 tr : 행, 가로 칸 th : 셀, 셀 제목, 테이블 머릿글, 가운데 정렬, bold td : 셀, 셀 내용 행 태그 안에 있는 셀 태그의 수로 열의 수가 정해짐 기본 구성 예시 1행1열 1행2열 1행3열 2행1열 2행2열 2행3열 3행1열 3행2열 3행3열 HTML 삽입 미리보기할 수 없는 소스 셀 합치기 colspan : 열 합치기 rowspan : 행 합치기 합치는 방법 1. th, td의 셀과 관련된 태그에 속성을 작성 후 합칠 셀의 수을 작성 2. 밀린 셀들 지우기 밀린 셀을 지우지 않으면 밀린 셀들도 렌더링.. 더보기
728x90

티스토리툴바