무정하지 않게 살기

우리가 화면에 출력할 텍스트에 스타일을 입혀서 다양한 방식으로 표현할 수있도록 하는 것이 텍스트 속성입니다. 텍스트 속성에 어떤 것이 있는지 알아볼게요. •font-family : 글꼴을 정의한다. •font-size : 글자 크기를 정의한다. •text-align : 정렬 방식을 정의한다. •color : 글자 색상을 정의한다 ● font-family 글꼴을 변경할 수 있습니다. 글꼴명을 속성값으로 지정합니다. 사용할 수 있는 전제로 존재하는 글꼴을 내 시스템에 설치를 해야만 사용할 수 있습니다. 만약 시스템 내에 설치되어 있지 않고 웹에 존재하는 폰트라면 웹 폰트를 지정하여 설치해야 합니다. 웹 폰트를 설정하는 방법에 대해서도 같이 알아볼게요. 우선 라이센스 걱정없이 상업용으로 쓸 수 있는 무료 폰트..

선택자란 선택자 : 어떤 요소에 스타일을 적용 할 것인지에 대한 정보 입니다. 무엇을 CSS로 꾸며줄 것인지 스타일을 입힐 대상 요소에 대한 것을 지정하는 것이에요. 선택자에는 종류가 여러가지 있어요. 기본 선택자, 그룹 선택자, 특성 선택자, 결합 선택자, 의사 클래스, 의사 요소 ... 이번에는 기본선택자와 그룹 선택자에 대해서 알아보겠습니다. 스타일 태그는 헤드의 맨 밑에 위치합니다. 우선 기본 선택자를 살펴보겠습니다. 선택자별로 적용되는 스타일을 보기 위해서 본문에는 각각 id와 class를 부여했어요. 김광석 - 그녀가 처음 울던 날 그녀의 웃는 모습은 활짝 핀 목련 꽃 같아 그녀만 바라보면 언제나 따뜻한 봄날이었지 그녀가 처음 울던 날 난 너무 깜짝 놀랐네 그녀의 고운 얼굴 가득히 눈물로 얼룩..

CSS 란? 콘텐츠의 크기, 색상, 위치, 움직임 등 웹문서에 추가되는 스타일 을 추가하는 언어 CSS 라고 합니다. CSS는 Cascading Style Sheets를 의미한다. •Cascading : 계단식 •Style : 멋을 내다 •Sheets : (종이) 한 장 즉 계단식으로 스타일을 정의하는 문서를 의미하며, 태그가 태그를 포함하는 계단식 구조를 지니고 있습니다. CSS 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있기 때문에 HTML 문서가 없는 CSS 문서는 사실상 의미가 없습니다. 대부분 문서를 별도로 만드렁 작업을 할 때에도 HTML 과 CSS 문서의 이름을 같게 지정하여 작업합니다. HTML : 웹 문서의 콘텐츠를 구성하는..

뷰포트 viewport viewport란 현재 화면에 보여지고 있는 이 영역을 말합니다. 모바일별로 뷰포트가 다르기 때문에 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타납니다. 예를 들어 크롬에서 개발자 도구를 열어보면 toggle device가 있습니다. 이것은 모바일 기기로 현재 웹 페이지를 열었을 때 어떻게 호환되는지를 미리 보여주는 화면입니다. 버튼을 누르면 모바일 화면으로 호환된 화면이 보입니다. Respnsive 의 드롭박스를 클릭하면 다양한 휴대폰의 종류도 선택하여 화면을 볼 수 있습니다. 이렇게 우리가 모바일 혹은 pc의 화면에서 보여지는 배율과 화면을 viewport라고 합니다. 즉 모바일 기기에서 여러 단말기의 해상도에 대응하기 위해 사용..

입력을 할 수 있는 input 태그와 제출 submit을 할 수 있는 form 을 배웠으니 이번에는 로그인 창을 직접 만들어볼게요. https://blue-dot.tistory.com/119 웹 HTML 입문 공부 9. form 데이터 전송, fieldset form은 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그입니다. 여기에서 서버란, 정보를 제공하는 호스트(host)를 말합니다. 가령, 우리가 티스토리 홈페이지를 열고자 할 때 blue-dot.tistory.com 회원 가입 로그인 정보 아이디 비밀번호 비밀번호 확인 개인 정보 이름 메일 주소 상기 코드의 실행화면은 다음과 같습니다.

form은 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그입니다. 여기에서 서버란, 정보를 제공하는 호스트(host)를 말합니다. 가령, 우리가 티스토리 홈페이지를 열고자 할 때, 티스토리의 서버에 html 페이지를 요청하면 서버에서 html 문서로 이루어진 웹 페이지를 응답으로 보내줍니다. 그리고 우리의 웹 브라우저에 홈페이지가 오픈되는 것이에요. 즉, 클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공합니다. 클라이언트가 어떤 요청을 보내는가에 따라, 응답은 달라질 수 있습니다. (아이디가 다르다던가, 비밀번호가 다르면 로그인을 거절하는 응답을 보낼 수도 있습니다.) form 여기에서 form은 입력 요소들을 감싸는 형태이며, 입력 값을 서버 측으로 제출(s..

지금까지 출력태그 (코드에 쓰여진 대로 보여주는 것) 에 대해서 알아보았다면 이번에는 입력태그에 대해서 배워볼게요. 입력 태그는 렌더링 이후의 결과물에다가 내용을 새롭게 기입할 수 있는 태그 입니다. 입력태그 input 태그 사용자로부터 값을 입력받을수 있는 대화형 컨트롤(또는 ‘필드’)를 나타냅니다. 기본적으로 인라인 요소이며, 단일 태그입니다. input은 속성 값에 변화를 주어서 각각의 다른 형태와 속성으로 바꿀 수 있습니다. 즉, input의 핵심은 type 속성이에요. type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라집니다. 사용 가능한 type은 20여 가지이며, 기본 타입의 값은 text (문자를 입력하는 네모 박스) 입니다. 그럼 가장 기본적인 text 로 사용할 수 있..

HTML 목록 LIST 태그 태그 목록은 연관 있는 항목(item)들을 나열한 것을 의미하며, 목록을 생성하면 블록 레벨 요소가 만들어집니다. HTML에서 목록은 ‘순서 없는 목록’과 ‘순서 있는 목록’으로 구분됩니다. ● Unordered List 순서가 없는 리스트. 태그 이름도 ul 입니다. ● Ordered List 순서가 있는 리스트. 태그 이름도 ol 입니다. 위 리스트로 와 를 입력하면 빈 항목 리스트가 생성됩니다. 이제 이 속에 목록의 요소들을 넣어주야 합니다. 태그 태그는 list item 이라는 뜻으로 목록에 들어가는 항목 하나 하나를 표현할 때 사용하는 태그입니다. 항목들( 태그들)을 감싸는 태그가 무엇이냐 (ul인지 ol인지)에 따라 목록의 앞에 붙는 기호가 달라집니다. ol에 들어..

하이퍼링크를 표시하는 방법에 대해서 배워보았으니 각 이미지를 클릭하면 해당 하이퍼링크를 표시하는 태그를 작성해보겠습니다. https://blue-dot.tistory.com/115 웹 HTML 입문 공부 6. 하이퍼링크 표시 링크 anchor 링크는 anchor (앵커, 축, 정박지, 닻 과 같은 의미를 가집니다.) 의 약자인 a 태그를 사용합니다. 하이퍼링크를 표시하는 태그는 다음과 같습니다. a 태그 요소는 href 속성을 통해 다른 페 blue-dot.tistory.com 그림의 출처는 픽사베이의 저작권 프리 이미지를 사용했습니다. https://pixabay.com/ko/ 놀라운 무료 이미지 - Pixabay 놀라운 무료 이미지 우리의 관대한 커뮤니티를 통해 공유되는 0.1 백만개의 이미지와 비디..

링크 anchor 링크는 anchor (앵커, 축, 정박지, 닻 과 같은 의미를 가집니다.) 의 약자인 a 태그를 사용합니다. 하이퍼링크를 표시하는 태그는 다음과 같습니다. a 태그 요소는 href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(연결)를 만드는 역할을 합니다. a태그는 인라인 요소이고, 콘텐츠는 주로 링크의 목적지예요. href 는 하이퍼링크 레퍼런스의 약자입니다. 출처 : 유노코딩 ; https://www.youtube.com/c/%EC%9C%A0%EB%85%B8%EC%BD%94%EB%94%A9/about target 타겟 하이퍼링크를 눌러서 열었을 때 새 탭에서 열지, 아니면 현재 창에서 열지를 정할 수도 있습니다. target = "_..