• KT_DS

    KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_26일차(HTML/CSS)

    2021. 8. 27.

    by. KAEY

    자바&파이썬 웹애플리케이션 전문가 양성과정 채용연계형 교육과정 26일차

    KT 자바교육 후기 (2021-07-22 ~ 2021-12-03) 

    2021-08-27 점점 힘이 든다든다든다 (참고, 8월 16일 ~ 9월 3일 비대면 주간, 4단계 거리두기로 인하여)

    HTML CSS

     

    [오전]

     

    폼(form) 

    웹화면의 특정 항목에 사용자가 뭔가를 입력하는 형태

     

     

     

    <form>
    <form>을 만드는 기본적인 태그

     

     

    <label>
     폼 요소에 레이블을 붙이기 위한 것
     폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있음
     예) 아이디, 비밀번호 처럼 입력 창 옆에 붙여 놓은 텍스트

     

     


     <fieldset>, <legend>
     <fieldset> 태그 사이의 폼들을 하나의 영역으로 묶고,
     <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙여 줌

     

     

     

    <input>
     사용자가 입력하는 부분
     type속성에 사용 가능한 유형

     

     input 의 다양한 속성

     

    <select>, <optgroup>, <option>
    주어진 옵션 중에서 선택할 수 있도록 하는 드롭다운 목록

     

     

    <textarea>
    여러 줄의 텍스트를 입력할 수 있도록 함

     

    [오후]

    CSS(Cascading Style Sheets) 

     HTML과 함께 웹 표준의 기본 개념

     HTML로 뼈대를 작성하고, CSS로 디자인을 구성 

     스타일 형식

     

    p { text-align : center; }

     선택자 { 스타일 속성 : 속성 값; } 

     

     

     

    스타일 시트

    스타일 규칙들을 관리하기 쉽도록 한 군데에 묶어 놓은 것 

     

    <!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>주요 SNS 서비스별 이용률</title>
  <style>
  table, th, td { 
    border:1px solid gray; /* 표의 테두리 - 1px 회색 실선 */
    border-collapse:collapse; /* 표 테두리와 셀 테두리 합치기 */
  }
  th, td {
    width:100px; /* 셀 너비 */
    padding:5px; /* 셀 패딩(테두리와 내용 사이의 여백) */
  }
  caption {
    font-size:20px; /* 표 설명글 글자 크기 */
    margin:10px; /* 표 설명글 주변 여백 */
    font-weight:bold; /* 표 설명글 글자 굵게 */
  }
  </style>
</head>
<body>....

    내부 스타일 시트

     

     

     

    <head>
  <title>온라인 프로필</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
</head>

    외부 스타일 시트

     

     

     

    <p>제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있는데, <br>
<span style="color:darkblue;"> 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들
은 평가합니다.</span></p>

    인라인 스타일

     

     

    전체 선택자 

    스타일을 모든 요소에 적용할 때 사용

    * {
margin: 0; padding: 0;
}

     

     

     

    태그 선택자 

    특정 태그가 쓰인 모든 요소에 스타일 적용

    p { text-align: center; } /* 텍스트 단락을 중앙 정렬 */
h2 { color:darkblue; }

     

     

     

    클래스 선택자 

    태그 대신 클래스 이름을 선택하여 지정된 클래스에 스타일 적용 

    한꺼번에 둘 이상의 클래스 스타일도 적용 가능 

    .reg {
font-size:14px;
color:darkblue;
}

     

     

    id 선택자

    웹 문서 안의 특정 부분에 스타일 적용 

    클래스 선택자는 문서 안에서 여러 번 적용할 수 있지만, id 선택자는 문서 안에서 한 번만 적용 가능 

    #container {
width:600px; /* 너비 */
padding:15px; /* 테두리와 내용 사이의 여백 */
border:1px dotted gray; /* 테두리 스타일 */
}

     

     

     

    그룹 선택자 

    두 개 이상의 요소에 같은 스타일 적용

    h1 { text-align: center; }
h2 { text-align: center; }

 ▽
h1, h2 { text-align: center; }

     

    font-family

    텍스트를 사용하는 요소들에 사용

    p { font-family: ”맑은 고딕”; }
body { font-family: ”맑은 고딕”, 돋움, 굴림; }

     

     

     

    @font-face

    웹 폰트 추가

    웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가

    사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식 

    구글 웹 폰트를 사용하거나, 웹 폰트를 업로드해 사용할 수 있음

    @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@font-face{
src:url('BMJUA_ttf.ttf');
font-family: 'JUA';
}

     

     

     

    font-size 

    글자 크기 조절

    일반적으로 px을 사용하지만, 모바일에서 확인하는 경우 디바이스 기준으로

    크기가 표시되기 때문에 다양한 디바이스를 고려하여 em을 사용함

    단위 설명
    em 해당 글꼴의 대문자 M의 너비를 기준으로 크기 조절( 1em == 16px )
    ex 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절
    px 모니터에 따라 상대적 크기
    pt 일반 문서에서 사용하는 단위

     

     

     

    font-weight

    글자 굵기 지정

    속성 값 설명
    normal 기본값
    bold | lighter | bolder 굵게 | 원래 굵기보다 더 가늘게 | 원래 굵기보다 더 굵게
    100~900 수치 400은 normal, 700은 bold

     

     

     

    font-style 

    글자 스타일 지정

    속성 값 설명
    normal 기본값
    italic 이탤릭체로 표시

     

     

    font 

    font-weight, font-style, font-size, font-family 등의 속성을 한꺼번에 묶어 약식으로 표현이 가능

    p.txt {
font: italic 12px 돋움; /* 글꼴 스타일, 크기, 글꼴 */
}

     

     

    color 

    글자 색 지정 

    색상 값은 16진수, rgb(rgba), hsl(hsla) 또는 색상이름으로 표기 가능

    h1 {color:rgb(0,200,0);} /* rgb 값 사용 */
h2 {color:blue;} /* 색상 이름 사용 */
.accent {color:#f00;} /* 16진수 사용 */

     

     

    16진수 표기법

    #ffff00처럼 #기호 다음에 6자리의 16진수를 쓰는 것이 가장 일반적인 방법 

     

     

     

    rgb와 rgba 표기법

    rgb(255,0,0) 혹은 rgba(255,0,0,0.5) 로 표기하고, 십진수로 표현

    rgba의 a는 불투명도 값을 나타내고, 0에서 1사이 수로 지정 가능. 

     

     

     

    hsl과 hsla 표기법

    hsl(360, 100%, 0%) 혹은 hsla(360,100%,0%,0.5)로 표현

    hue(색상), saturation(채도), lightness(밝기) 를 의미

    hsla의 a는 불투명도 값을 나타내고, 0에서 1사이 수로 지정 가능.

     

    color 

    색상 이름 표기법

    red, yellow, black, white, blue 등 잘 알려진 색상 이름으로 표시 가능.

     

     

     

    색상 추출 방법

    구글에서 컬러 피커 검색

    컬러캅 (http://colorcop.net/download/)

     

     

     

    text-decoration 

    텍스트 밑에 줄을 긋거나 취소선 표시

    속성값 설명
    none 기본 값
    underline 밑줄 표시
    overline 영역 위로 선 표시
    line-through 영역을 가로지르는 선(취소 선) 표시

     

     

     

    text-transform

    영문자의 대소문자 변환

    속성값 설명
    none 기본 값
    capitalize 첫번째 글자를 대문자로 변환
    uppercase 모든 글자를 대문자로 변환
    lowercase 모든 글자를 소문자로 변환

     

     

     

    letter-spacing, word-spacing 

    letter-spacing 속성은 낱 글자 사이 간격을 조절

    word-spacing 속성은 단어와 단어 사이 간격을 조절

    주로 letter-spacing 사용

     

     

     

    text-align 

    텍스트 정렬

    line-height

    문단의 줄 간격을 조절

     

     

     

    text-overflow 

    white-space: nowrap 으로 지정해서 줄 바꿈 하지 않을 경우 넘치는 텍스트를 처리하는 것

     

     

     

    list-style-type 

    순서 없는 목록에서 기본적으로 ●을 사용

    순서 목록에서 숫자가 기본적으로 붙고, 속성을 이용하여 숫자 스타일 변경 가능

     

    list-style-image 

    url(이미지경로) 형태로 불릿을 이미지로 변경해서 지정 가능

     

     

    background-color 

    16진수나 rgb값 또는 색상 이름을 사용하여 지정

     

     

     

    background-image

    배경에 이미지를 넣고자 할 때 사용

     

     

     

    background-repeat 

    배경 이미지 반복여부 지정

     

     

    background-size

    배경 이미지 크기 조절

     

     

    background-position 

    배경 이미지가 표시되는 위치를 조절 

    키워드 표시법 수평위치는 left, center, right 중에서 수직위치는 top, bottom, center 중에서 선택

    백분율 표시법 주어진 요소의 해당 위치에 배경 이미지의 위치를 백분율로 맞춤

    길이 표시법 배경 이미지 위치를 길이로 지정

     

     

     

    linear-gradient

    선형 그라데이션 – 직선 형태로 색상이 바뀌는 것

    색상이 바뀌는 방향을 알려주는 각도 표현 - deg

    radial-gradient

    원형 그라데이션 – 원이나 타원의 중심부터 원을 그리면서 바깥으로 색상이 바뀌는 것

    그라데이션이 시작하는 원의 중심 지정 가능 

    원의 크기 지정 가능

     

     

    실습 예제 - 웹 페이지 만들어보기 

    웹 페이지의 가로 길이에 따라 사진의 크기와 글씨 크기가 변화하는 반응형 페이지 입니다.

     

     

    저작자표시 비영리 동일조건 (새창열림)

    'KT_DS' 카테고리의 다른 글

    KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_28일차(JS)  (2) 2021.08.31
    KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_27일차(HTML/CSS)  (0) 2021.08.30
    KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_25일차(HTML/CSS)  (0) 2021.08.25
    KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_24일차(DB)  (0) 2021.08.25
    KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_23일차(DB)  (0) 2021.08.24

    댓글 (비로그인 댓글 허용하지 않습니다.)

    관련글

    맨 위로
전체 글 보기

티스토리툴바