반응형

Front-end 51

[웹 퍼블리싱] 01. HTML/CSS 시작하기

노래 브리지 노래에서 브리지는 한 번만 나오기 때문에, 이번에는 클래스 대신 아이디('id')를 이용해서 노래의 브리지 부분만 연두색(lime)으로 써주세요. 이 노래에서는 "허약한 내 영혼에 힘을~" 부분이 브리지입니다. 노래에서 유일하게 조금 다른 부분이죠? 하늘을 달리다 이적 두근거렸지 누군가 나의 뒤를 좇고 있었고 검은 절벽 끝 더이상 발 디딜곳 하나 없었지 자꾸 목이 메어 간절히 네 이름을 되뇌었을 때 귓가에 울리는 그대의 뜨거운 목소리 그게 나의 구원이었어 마른 하늘을 달려 나 그대에게 안길 수만 있으면 내 몸 부서진대도 좋아 설혹 너무 태양 가까이 날아 두 다리 모두 녹아내린다고 해도 내 맘 그대 마음 속으로 영원토록 달려갈거야 내가 미웠지 난 결국 이것밖에 안 돼 보였고 오랜 꿈들이 공허한..

Front-end/HTML&CSS 2021.02.04

[웹 퍼블리싱] 01. HTML/CSS 시작하기

듀엣 가요제 혼성 듀엣곡의 가사를 보여주는 페이지를 만들어보려고 합니다. 가사의 각 부분은 태그로 나뉘어 있는데요. 클래스를 이용해서 각 부분을 다른 색으로 칠해주세요. 남자가 부르는 부분은 파란색(blue) 여자가 부르는 부분은 핑크색(hotpink) 남녀가 같이 부르는 부분은 연두색(lime)으로 바꿔주세요. 사랑보다 깊은 상처 임재범, 박정현 오랫동안 기다려왔어 내가 원한 너였기에 슬픔을 감추며 널 보내줬었지 날 속여가면서 잡고 싶었는지 몰라 너의 눈물 속에 내 모습 아직까지 남아있어 추억을 버리긴 너무나 아쉬워 난 너를 기억해 이젠 말할게 그 오랜 기다림 너 떠나고 너의 미소 볼 수 없지만 항상 기억할게 너의 그 모든걸 사랑보다 깊은 상처만 준 난 이젠 깨달았어 후회하고 있다는 걸 이젠 모두 떠나..

Front-end/HTML&CSS 2021.02.04

[웹 퍼블리싱] 01. HTML/CSS 시작하기

프로필 페이지 기본적인 HTML 태그 몇 가지를 배웠으니, 간단한 프로필 페이지 정도는 만들 수 있겠죠? 가장 좋아하는 유명 인물을 소개하는 사이트를 만들어보세요! 아래의 순서대로 요소를 넣어주세요. title 태그에 인물 이름 h1 태그에 인물 이름 img 태그에 인물 사진 (인터넷에 올라와 있는 이미지) p 태그에 간단한 설명 (b 태그와 i 태그 하나씩 포함시켜주세요.) 이 인물과 연관 있는 사이트로의 링크 (a 태그) 한 개 곰자 조승우 배우님이 입양한 강아지 이름은 곰자입니다. 본 내용은 Codeit의 '웹 퍼블리싱' 강의를 참고하여 작성한 내용입니다.

Front-end/HTML&CSS 2021.02.04

[웹 퍼블리싱] 01. HTML/CSS 시작하기

텍스트 꾸미기 연습 HTML 태그를 직접 사용해봅시다. 홈페이지가 아래 그림처럼 구현되도록, 비어있는 style 코드를 채워주세요. 태그는 가운데로 정렬하고, lime 색깔로 칠해주세요. 태그는 오른쪽으로 정렬하고, hotpink 색깔로 칠해주세요. 태그는 오른쪽으로 정렬하고, blue 색깔로 칠해주세요. 태그에는 ‘웹사이트’라는 단어가 두 번 나오는데요, 이 단어를 굵게 써주세요. 태그에 있는 글자 중 태그로 감싸진 ‘HTML’과 ‘JavaScript’ 글자의 폰트를 64px로 바꾸고, green 색깔로 칠해주세요. 내 첫 HTML 프로젝트 이름: 이윤수 이메일: yoonsoo@codeit.kr 나는 HTML을 좋아한다. 앞으로 이 강의를 듣고, 나만의 웹사이트를 만들어볼 계획이다. 코드잇과 함께라면 ..

Front-end/HTML&CSS 2021.02.04

색상과 배경

웹 사이트를 디자인할 때 가장 쉬운 방법은 색상과 배경을 바꾸는 것이다. 1. 색상 색상을 표현하는 방법은 다양하다. 십진수로 표시할 수도 있고, rgb값을 직접 입력할 수 있다. 또는 색상 이름을 직접 입력할 수 있다. 2. 배경 배경은 이미지와 색으로 디자인이 가능하다. 그라데이션, 반복 등 여러 가지 기법이 있다. .bg1 { background-clip:border-box;} .bg2 { background-clip:padding-box;} .bg3 { background-clip:content-box;} / 1. border-box : 테두리까지 적용 2. padding-box : 테두리를 뺀 범위까지 적용 3. content-box : 내용 부분에만 적용 본 내용은 이지스퍼블리싱의 'Do it..

Front-end/HTML&CSS 2021.01.08

텍스트 관련 스타일

웹 문서에서 가장 많은 부분을 차지하는 부분은 텍스트이다. 텍스트 스타일에 따라서 디자인이 많이 달라지므로 자세하게 알아보자. 1. 글꼴 관련 스타일 글꼴을 지정하는 방법은 설치되어있는 폰트를 이용하는 방법과 구글 웹 폰트를 사용하는 방법이 있다. 또한, 글자 크기, 굵기, 속성, 스타일도 원하는 대로 지정할 수 있다. 2. 텍스트 스타일 글자 색, 밑줄, 대/소문자 변환, 그림자 효과 등 다양한 효과를 주어 텍스트 스타일을 변경할 수 있다. 3. 문단 스타일 글자 쓰기 방향, 정렬, 줄간격 등 다양하게 문단 스타일을 변경할 수 있다. 텍스트 정렬 4. 목록 스타일 목록의 불릿과 번호 스타일, 불릿 대신 이미지 넣기 등 다양하게 디자인 할 수 있다. 본 내용은 이지스퍼블리싱의 'Do it! HtML5 +..

Front-end/HTML&CSS 2021.01.07

CSS 기초

CSS는 HTML과 함께 웹 표준 개발의 기본 개념이다. HTML이 텍스트나 이미지 등 각 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면 CSS는 텍스트 색상이나 크기, 이미지 등 디자인 요소를 담당한다고 할 수 있다. 따라서, CSS를 이용하면 한층 더 업그레이드된 웹 디자인을 할 수 있다. 1. 스타일 시트 여러 가지의 스타일 규칙이 사용되는 경우가 많아서 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓는 것을 '스타일 시트'라고 한다. 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것이다. 외부 스타일 시트 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와서 사용하는 것이다. 2. 주요 선택자 전체 선택자 말 그대로 스타일을 모든 요소에 적용할 때..

Front-end/HTML&CSS 2021.01.07

폼 관련 태그들

웹 폼(form)은 특정 항목에 사용자가 입력하는 형태이다. (ex. 로그인 창) 다양항 항목 및 체크박스를 넣을 수 있다고한다. 폼과 관련된 태그에 대해서 공부해봤다. 1. 폼(form) 만들기 여러 폼 요소 속성을 통해 사용자가 입력한 자료를 서버에서 어떤 프로그램을 이용해 처리할 것인지, 서버로 어떤 방식으로 넘길 것인지 지정한다. 속성은 method, name, action, target등이 있다. 특히, 우리가 인터넷을 하면서 자주 볼 수 있는 자동 완성 기능 속성은 "autocomplete"이다. 레이블 위와 같이 태그를 쓰면 입력 창 옆에 텍스트를 만들 수 있다. 왼쪽 이미지와 같이 만들 수 있다. (파란 박스) 또한, "아이디 저장"처럼 체크박스도 만들 수 있다. ... 위의 태그는 폼 요..

Front-end/HTML&CSS 2021.01.05

이미지와 하이퍼링크

웹에 이미지를 삽입하거나 링크를 삽입하는 방법을 알아보자. 이미지 삽입 1. 저장된 이미지 파일 2. 인터넷의 이미지 파일 이미지 속성 1. 이미지 설명 화면 낭독기가 시각장애인에게 읽어 줄 수 있다. 또는 이미지를 제대로 표시할 수 없는 상황에서 이미지 자리에서 확인할 수 있다. 이미지에 설명 글을 붙이기 (한글 문서 캡션 느낌이다.) 라이언커피 2. 이미지 크기 설정 하이퍼 링크 1. 링크 만들기 텍스트 2. 방문했던 링크 글자 색 바꾸기 3. 새 탭에서 링크열기 SIRI Github 4. 페이지 점프하기 (앵커) 텍스트 또는 이미지 텍스트 또는 이미지 본 내용은 이지스퍼블리싱의 'Do it! HtML5 + CSS3 웹 표준의 정석'을 참고하여 작성한 내용입니다.

Front-end/HTML&CSS 2021.01.04

텍스트 관련 태그

텍스트로 이루어진 정보는 수정이 편리한 장점이 있지만 텍스트의 양이 많을 수록 정보를 찾기 힘들다는 단점이 있다. 따라서, 크기나 색상, 스타일, 목록 등을 바꾸어 표시한다. 덩어리로 표시 * 제목 표시하기 텍스트 (h1이 가장 큰 제목이고 h6이 가장 작은 제목이다.) * 단락 만들기 텍스트 * 줄 바꾸기 * 수평 줄 넣기 * 인용문 넣기 텍스트 * 입력하는 그대로 화면에 표시 텍스트 한 줄로 표시 * 굵게 표시하기 텍스트 텍스트 (육안으로는 차이가 느껴지지 않으나 을 사용한 부분을 강조되었다고 화면 낭독기가 알려준다.) * 이탤릭체로 표시하기 텍스트 텍스트 (강조하고 싶을 때는 을 사용하고, 관용구는 를 사용한다. * 인용 내용 표시하기 텍스트 (와 차이점은 줄바꿈 없이 다른 내용과 함께 한줄로 표시..

Front-end/HTML&CSS 2021.01.04
반응형
LIST