변수 선언 위치에 따른 구분

Java

자바 변수 선언을 기준으로

public class Srudent{

//필드(멤버 변수)

private String name; //인스턴스 변수

public static String schoolName;//클래스 변수, static 변수

 

//메소드

public setName(String name /*메소드 매개변수*/){

this.name=name;

int num=10; //메소드 지역 변수

 

if(){

int a = 20;// if 지역변수

}

}

}

 

변수 선언하기: var 뒤에 변수 이름 작성, var을 한번만 쓰고 뒤에 여러개의 변수를 한꺼번에 선언할 수도 있음

스코프: 변수가 적용되는 범위, 스코프에 따라 지역변수(로컬변수)와 전역변수(글로벌 변수)

Javascript

자바스크립트 변수 선언을 기준으로

var num1; //전역변수(선언된 후 같은 문서 내 어디서든 사용가능)

num2; //전역변수(변수명 앞에 아무런 키워드가 없으면 전역변수가 된다.)

 

function test(){

var num3; //function 지역변수

num4; //전역변수(변수명 앞에 아무런 키워드가 없으면 전역변수가 된다.)

 

if(조건식){

var num5; //function 지역변수

num6; //전역변수(변수명 앞에 아무런 키워드가 없으면 전역변수가 된다.)

}

}

호이스팅: 변수를 뒤에서 선언하지만, 마치 앞에서 선언한 것처럼 인식함, 함수 실행문을 앞에 두고 선언 부분을 뒤에 두더라도 앞으로 끌어올려 인식함.

 

재선언과 재할당이 가능하다.

재선언: 이미 선언한 변수를 다시 선언할 수 있음

재할당: 같은 변수에 다른 값을 할당할 수 있음

->재선언과 재할당이 가능하면 실수로 변수를 잘못 조작할 확률이 높아짐.

 

let을 사용한 변수의 특징

  • 블록 변수- 블록({}) 안에서만 사용할 수 있다.->전역변수는 변수 이름과 초깃값만 할당하면 됨
  • 재할당은 가능하지만 재선언은 할 수 없다.
  • 호이스팅이 없다.

const를 사용한 변수의 특징

  • 상수- 변하지 않는 값을 선언할 때 사용
  • 재선언, 재할당할 수 없음

자바스크립트 변수, 이렇게 사용하자

  • 전역변수는 최소한으로 사용
  • var 변수는 함수의 시작 부분에서 선언
  • for문에서 카운터 변수는 var보다 let변수로 선언
  • ES6를 사용한다면var보다 let를 사용하는 것이 좋다.
<script>
        var x =10;

        function displayNumber(){
            console.log("x is"+x);
            console.log("y is "+y);
            var y = 20;
        }
        displayNumber();

        function addNumber(num1, num2){
            return num1+num2;
        }

        var sum = addNumber(10,20);
        console.log(sum);

        sum=50;
        console.log(sum);

        var sum = 100;
        console.log(sum);
    </script>

변수 선언 방식

var: 변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope, 재선언과 재할당이 가능.

let: 변수, 변수명 중복 X, 블록{} 레벨scope, 재할당을 가능하나 재선언은 불가능

const: 상수, 변수명 중복X, 블록{} 레벨 scope

1순위: const(Js는 특정 요소를 선택해서 사용하는 경우가 많아서 변수에 고정시케둠)

2순위: let

3순위: var (ES6 이후부터 사용 빈도가 많이 적어짐)

 

기본 숫자형 따옴표 없이 숫자로만 표기합니다  
  문자열 작은따옴표나 큰따옴표 묶어서, 숫자를 따옴표로 묶으면 문자로 인식  
  논리형 참과 거짓이라는 2가지 값만 있는 유형, true false는 소문자  
복합 배열 하나의 변수에 여러개의 값 저장  
  객체 함수와 속성을 함께 포함 var date() = new Date
특수 undefined 자료향이 지정되지 않았을 때의 상태 예를 들어 변수 선언만 하고 값을 할당하지 않은 변수  
  null 값이 유효하지 않음  

typeof: 콘솔에 입력하면 자료형을 알려줌

 

배열: 하나의 변수에 여러 값을 저장할 수 있는 복합 유형

배열명["값1", "값2",..]

배열명[ ]: 빈 배열 선언


자바스크립트 기능표현 함수 단위.

function 함수명([매개변수1, 매개변수2,...]){

명령

}

실행: 함수명() or 함수명(변수)

 

익명함수(함수 표현식)

function(매개변수){              // 함수 선언 ①
                // 함수 정의
            }

            const 변수 = function(매개변수){ // 함수 선언 ②
                // 함수 정의
            }

- 이름이 없는 함수이기 때문에 필요할 때 마음대로 호출하는 것이 불가능 ①
 - 이벤트 핸들러와 같이 바로 동작하는 함수가 필요한 경우 또는 변수, 매개변수에 함수를 저장 해야하는 경우 사용함.

즉시실행함수

(function(매개변수){
                // 함수 정의
            })();

            (function(매개변수){
                // 함수 정의
            }());

- 익명 함수의 한 종류로써
          함수가 정의 되자마자 바로 실행되는 함수

        *** 즉시 실행 함수 사용 이유
        1) 함수 선언, 정의, 호출의 일련의 과정을 수행하지 않아도 바로 실행된다. 
            -> 호출부가 없으므로 일반적인 함수보다 속도적 우위를 가지고 있음. 

        2) 사용하려는 변수명이 전역변수로 사용되어지고 있는 경우
           즉시 실행 함수를 이용하여 내부의 지역 변수로 작성하여
           변수명 충돌 문제를 해결할 수 있다.

화살표 함수

익명 함수의 표현식을 간단히(간결하게) 표현한 표기법

        작성법 1. 기본 형태 ([매개변수]) => { 함수 정의 }
            익명 함수   : function(){ }
            화살표 함수 : () => { }

            익명 함수   : function(num){   return num * 2;   }
            화살표 함수 : (num) => {  return num * 2;  }


        작성법 2. 매개변수가 "하나"인 경우 () 생략 가능
            익명 함수   : function(e){  
                            e.target.style.backgroundColor = "yellow"; 
                        }
            화살표 함수 : e => { 
                            e.target.style.backgroundColor = "yellow"; 
                        }

        작성법 3. 매개변수가 없을 경우 "무조건" () 작성

        작성법 4. 함수 정의 부분이 return [식 또는 값] 으로만 작성되어 있는 경우
                 4-1. {}, return 생략 가능
                 4-2. return되는 값이 객체(object)인 경우 {}, return 생략 불가능

'HTML+CSS+자바스크립트' 카테고리의 다른 글

객체  (0) 2023.05.31
함수, 이벤트  (0) 2023.05.30
자바스크립트  (0) 2023.05.25
CSS고급 선택자  (0) 2023.05.24
CSS,박스 모델  (0) 2023.05.23

자바스크립트

  • 동적인 웹 문서 제작과 웹 응용 프로그램 개발을 위한 사용자 인터페이스 개발을 위해서 필수적으로 사용됨.
  • 인터프리터 기반 언어
  • 객체 기반
  • 대소문자 구분

작성방법

  • 브라우저 콘솔에 직접 작성
  • html 내부에 script 태그를 이용해서 작성
  • html 외부에 (.js) 파일을 이용해서 작성
  • 태그에 직접 JS코드를 작성

src가 있는 스크립터는 내용X

  • [window.] alert("알림창에 출력할 문구");
  • console.lof("콘솔창에 출력할 문구");
  • document.write("화면상에 출력할 문구");
  • 선택한 요소.innerText = "요소에 출력할 문구";
  • 선택한 요소.innerHTML="요소에 출력할 문구";
  1. document.write("내용")
  2. innerText: 자바스크립트에서 요소에 작성된 내용을 읽어들이거나 변경하는 속성
  3. innerHTML: 요소 전체를(태그, 속성, 내용) 읽어들이거나 변경하는 속성

 

데이터를 입력받는 구문(변수저장)

  • 변수 = [window.]confirm("요구사항");
  • 변수 = [window.]prompt("요구사항");
  • 변수 = 선택한요소.속성(className, innerHTML, innerText)
  • 변수 = 선택한input요소.value;

confirm: 질문에 대한 예/아니오 결과를 얻고자 할 때 사용하는 대화 상자 출력 함수 

prompt: 텍스트를 작성할 수 있는 대화상자. 확인: 입력한 값 반환(문자열)

취소: null 반환

 

설정: text요소.value = 값;

접근: let 변수 = text 요소.value;

'HTML+CSS+자바스크립트' 카테고리의 다른 글

함수, 이벤트  (0) 2023.05.30
Js변수  (0) 2023.05.26
CSS고급 선택자  (0) 2023.05.24
CSS,박스 모델  (0) 2023.05.23
p.233,234,235 예제  (0) 2023.05.22

background-repeat: 브라우저 화면에 가득 찰때 까지 가로와 세로로 반복하는 것이 기본값. no-repeat을 자주 씀.

background-position: 배경 이미지의 위치를 조절

[background-position: <수평 위치> <수직 위치> ;]

background: tor url(() no-repeat center bottom fixed;

속성값이 다르므로 입력 순서는 상관 없습니다.

<style>
        /*img{
            background-origin: content-box;
            right: 0;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
        }
        p{
            position: relative;
        }*/
        body{
            background: white url("../images/tulip.gif") no-repeat fixed center right;
            color: #665544;
            padding: 10px;
        }
        span{
            font-weight: bold;
            font-style: italic;
        }
    </style>

선택자: 스타일 시트를 적용할 대상.

전체 선택자: *.와일드 선택자라고도 하며 모든 HTML태그 선택

아이디와 클래스의 차이: 아이디는 한번만, 클래스는 복수 요소에 적용.

연결 선택자: 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자(컴비네이션 선택자, 조합 선택자)

하위 선택자:

  • 부모 요소에 포함된 모든 하위 요소에 스타일이 적용된다.
  • 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용
  • 하위 선택자를 정의 할 때는 상위 요소와 하위 요소를 나란히 쓴다.

[상위요소 하위요소] //이것때문에 띄어쓰기 함부러 하면 안됨.

section p{...(section 요소 안의 모든 p 요소에 적용할 스타일 규칙)}

section p{/*section 요소의 모든 하위 p 요소에 적용*/
            color: blue;
        }

자식선택자: 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자

[부모요소>자식요소]

section > p{/*section 요소의 바로 아래 하위 p 요소에 적용 다른것들은 <div> 밑에 있어서 안됨*/
            color: blue;
        }
<section>
        <h1>예약 방법 & 사용 요금</h1>
        <p>아직 온라인 예약 신청이 준비되어 있지 않습니다.
            <br />전화 (xxx-xxxx-xxxx)로 문의 바랍니다.
        </p>
div#header p{
            color: green
        }
<div id="header">
            <p>가족실(2~4인) : 60,000원/일</p>
            <p>도미토리(4인 공용) : 25,000원/일</p>
        </div>

형제 관계: 웹 문서에서 부모 요소가 같을 경우

인접 형제 선택자: 형제 요소 중에서 첫번째 동생 요소만 선택하는 것(상위 요소 기점)

[요소1+요소2]

형제 선택자: 모든 형제 요소 적용

[요소1~요소2]

        h1+p{
            background-color: #222;
            color: #fff;
        }
        h1~ul{
            background-color: #222;
            color:aqua;
        }

 

<body>
    <section>
        <h1>예약 방법 & 사용 요금</h1>
        <p>아직 온라인 예약 신청이 준비되어 있지 않습니다.
            <br />전화 (xxx-xxxx-xxxx)로 문의 바랍니다.
        </p>
        <div id="header">
            <p>가족실(2~4인) : 60,000원/일</p>
            <p>도미토리(4인 공용) : 25,000원/일</p>
        </div>
    </section>
    <setion>
        <h1>예약 방법 및 요금</h1>
        <ul>
            <li>직접 통화</li>
            <li>문자 남기기</li>
        </ul>    
        <ul>
            <li>1인 : 40,000원</li>
            <li>2인 : 60,000원</li>
            <li>3인 : 80,000원</li>
            <li>4인 : 100,000원</li>
        </ul>
    </setion>
</body>

 

#table>tr*2>td*3

 

[속성] 선택자: 지정한 속성을 가진 요소를 찾아 스타일 적용

[원하는 속성]

a[href] //href 속성이 있는 a 요소를 찾는 선택자

 

[속성=속성값] 선택자: 주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용

a[target = _blank]{..} // <a target="_blank">인 요소

a태그 밑줄 없애는 법 text-decoration:none(p.217)

새로운 창: target

[속성~=값] 선택자: 여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일 적용

[class~=button]{..} class값 중에 button이 있는 요소

[속성|=값] 선택자: 특정 속성값이 포함된 속성 요소를 선택

[속성^=값] 선택자: 즉정 속성값으로 시작하는 속성 요소

[속성$=값] 선택자: 특정한 값으로 끝나는 속성의 요소

[속성*=값] 선택자: 값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일 적용


가상 클래스(가상 선택자): 사용자 동작에 반응

  1. 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자'
  2. 방문한 링크에 스타일을 적용하는 ':visited 가상 클래스 선택자'
  3. 특정 요소에 마우스 포인터를 올려놓으면 프타일을 적용하는 ':hover 가상클래스 선택자'
  4. 웹 요소를 활성화 했을 때 스타일을 적용하는 ':active 가상 클래스 선택자'
  5. 웹 요소에 초점이 맞추어 졌을 때 스타일을 적용하는 ':focus 가상 클래스 선택자'
  6. 앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'
  7. 요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'
  8. 선택한 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자'
  9. 특정 요소를 제외하고 스타일 적용 ':not 선택자'

구조 가상 클래스: 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자.

:only-child 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택
A:only-type-of 부모 안에 A 요소가 하나뿐일 때 선택
:first-child 부모 안에 있는 모든 요소중에서 첫번째 자식 요소를 선택
:last-child 부모 안에 있는 모든 요소중에서 마지막 자식 요소를 선택
A:first-of-type 부모 안에 있는 A 요소중에서 첫번째 요소를 선택
A:last-of-type 부모 안에 있는 A 요소중에서 마지막 요소를 선택
:nth-child(n) 부모 안에 있는 모든 요소중에서 n번째 자식 요소를 선택
:nth-last-child(n) 부모 안에 있는 모든 요소중에서 끝에서 n번째 자식 요소를 선택
A:nth-of-type(n) 부모 안에 있는 A 요소중에서 n번째 요소를 선택
A:nth-last-of-type(n) 부모 안에 있는 A 요소중에서 끝에서 n번째 요소를 선택

수식을 사용해 위치 지정 :nth-child(odd) :nth-child(even)

가상요소: 화면 꾸미기용 요소를 웹 문서에 포함시키지 않기 위해 가상요소를 사용

  • ::first-line : 첫번째 줄에 스타일 적용
  • ::first-letter: 첫번째 글자에 스타일 적용
  • ::before: 요소의 앞에 텍스트나 이미지 추가
  • ::after: 요소의 뒤에 텍스트나 이미지 추가
<style>
        body p{
            font-size: 20px;
        }
        body p:nth-child(odd){
            color: blue;

        }
        body p:nth-child(even){
            color: rgb(255, 153, 0);

        }
        p::first-letter{
            background-color: gray;
            color: white;
            font-weight:bolder;
            font-size: larger;
        }
    </style>

'HTML+CSS+자바스크립트' 카테고리의 다른 글

Js변수  (0) 2023.05.26
자바스크립트  (0) 2023.05.25
CSS,박스 모델  (0) 2023.05.23
p.233,234,235 예제  (0) 2023.05.22
p.191, 192 예제  (0) 2023.05.22

궁금했던것: div 태그(한 라인 전체 차지)는 Division의 약자로 웹사이트의 레이아웃을 만들때 주로 사용, 논리적 구분을 정의, CSS를 활용하여 스타일 적용,display 속성이 block임, 줄바꿈이 됨

inline은 한줄에 여러 개(image)

span 태그는 display 속성이 inline, 줄바꿈이 안됨.

블록 레벨 요소: 요서를 삽입했을 때 혼자 한 줄을 차지하는 요소, 요소 너비가 100%(h1, div, p)

인라인 레벨 요소: 줄을 차지하지 않는 요소, 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음(image, strong, span)

 

박스모델: 박스 형태의 요소

  • 콘텐츠 영역
  • 패딩: 박스와 콘텐츠 영역 사이의 여백
  • 테두리: 박스 테두리
  • 마진: 여러 박스 모델 사이의 여백

패딩, 테두리, 마진은 각각 상하좌우로 나뉘어 있어 네 방향의 스타일 설정 가능

width(넓이), height(높이): 콘텐츠 영역의 크기를 지정한다.(크기, 백분율: 창의 사이즈가 줄면 같이 줄어듦, auto)

box-sizing: 박스 모델의 크기 계산, 실제 박스 모델의 너비를 계산할 때 어디까지 포함할지 결정하는 속성. 

박스 크기: width, padding, border

  • border-box: 테두리까지 포함해서 너빗값을 지정합니다.
  • content-box: 콘텐츠 영역만 너빗값을 지정합니다. 기본값

box-shadow: 박스 모델에 그림자 효과를 줌, 

[box-shadow: < 수평거리 >< 수직 거리 >< 흐림 정도 >< 번짐 정도 >< 색상 > inset]

수평거리, 수직거리: 양수 값은 오른쪽, 아래, 음수값을 왼쪽, 위

흐림정도: 0이 기본값으로 진한 그림자, 커질 수록 부드러운 그림자, 음숫값을 사용 불가능

번짐정도: 양숫값은 모든 방향 퍼져서 , 음숫값은 축소해서, 기본값 0

inset: 안쪽 그림자.

<title>박스모델</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .box1{
            border: 10px solid #ff0000;
            box-shadow: 2px -2px 5px 0px;/*오른쪽 위*/
        }
        .box2{
            box-sizing: border-box;
            border: 10px solid rgb(1, 141, 255);
            box-shadow: 5px 5px 15px 5px rgb(0, 17, 255);/*오른쪽 아래*/
        }
    </style>
 <div class="box1"></div>
    <div class="box2"></div>

박스 모델의 값 지정 방향: top->right->bottom->left

border-style: 테두리 스타일 지정, 기본값 none

none 테두리가 없음
solid 실선
dotted 점선
dashed 짧은 직선
double 이중선, 두 선의 간격이 border-width 값

테두리 스타일을 4방향 모두 아르게 지정하고 싶다면 border-top-style, border-right-style, border-bottom-style, border-left-style.

border-color: 테두리 색상 지정.

border-width: 테두리 두께를 지정

[border-width:<크기>|thin|medium|thick]

border: 테두리 스타일과 두께, 색상을 한꺼번에 표현한다.

border-radius: 테이블의 테두리, 이미지가 둥글게, 박스 모델의 꼭짓점 부분에 원(반지름 r)이 있다고 가정해서 둥글게 처리

사진을 둥글게 하고 싶다면 반지름값을 너비나 높이의 50%로 지정.

[border-radius: < 크기 >|< 백분율 >]

border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-buttom-right-radius

margin: 여백을 조절하는 속성, 현재 요소 주변의 여백

[margin: <크기>|<백분율>|auto(가운데 정렬)]

 

마진 중첩 현상: 요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐지는 것, 요소를 가로로 배치할 경우는 상관 없음.

margin: 30px;  을 줄 경우 60px이 아닌 30px이 된다.

padding: 콘텐츠와 테두리 사이의 여백.

<style>
        #round{
            border-radius: 25px;/*모든 꼭짓점을 둥글게*/
        }
        #circle{
            border-radius: 50%;/*테두리를 원으로*/
        }
        #container{
           
            border: 1px solid #000;
        }

        #description{
            border: 1px solid #000;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            margin:30px;
            padding: 20px;
        }
        #recipe{
            border: 1px solid #000;
            margin:30px;
            padding: 20px;
        }
        #package{
            border: 1px solid #000;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
            margin:30px;
            padding: 20px;
        }
    </style>

display: 요소의 배치 방법 결정(사용할 수 있는 속성 값이 아주 많음), 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능

종류 설명
block 인라인 레벨 요소를 블록 레벨 요소로 만듭니다.
inline 블록 레벨 요소를 인라인 레벨 요소로 만든다.
inline-block 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다.
none 해당 요소를 화면에 표시하지 않습니다.

float: 요소를 왼쪽이나 오른쪽에 떠 있게 만듦. image, div (right, left, none)

clear: float 속성을 해제, 해제한 뒤 다시 float를 줄 수 있다. p.272

display: inline-block과 float: left 속성의 차이

display: inline-block을 가로로 배치하면서도 기본 마진과 패딩을 가지고 있지만, float: left로 배치하면 가로로 배치될 때 요소에 기본 마진과 패딩이 없다. 그래서 필요하면 요소마다 마진과 패딩을 지정해야 한다. 그리고 float: left를 사용하면 clear 속성으로 플로팅을 해제해야 한다.

<style>
        body{
            width: 750px;
            font-family: Arial, Verdana, sans-serif;
            color: #665544;
        }
        blockquote{
            font-size: 130%;
            float: right;
            width: 285px;
            font-style: italic;
            font-family: Georgia, Times, serif;
            border-bottom: 1px solid #000;
            border-top: 1px solid #000;
            margin: 0px 0px 10px 10px;
            padding: 10px;
        }
    </style>
.clear{
            clear: both;
        }
<p class="clear">

left, right, top, bottom: 웹 요소의 위치를 정한다. //position 과 같이

positon: 배치 방법을 지정

종류 설명
static 문서의 흐름에 맞춰 배치한다. 기본값.
relative 위칫값을 지정할 수 있다는 점을 제외하면 static 과 같음
absolute relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치
fixed 브라우저 창을 기준으로 위치를 지정해 배치

배경위에 글자 표시하기

<head>
    <meta charset="UTF-8">
    <title>position</title>
    <link rel="stylesheet" href="../css/position-2.css">
</head>
<body>
    <div id="contents">
        <h1>CSS3</h1>
    </div>
</body>
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#contents{
    background: url(../images/02.jpg) no-repeat;
    background-size: cover;/*요소를 모두 덮도록 이미지 확대*/
    width: 800px;
    height: 500px;
    margin: 0 auto;
    position: relative;/*이미지를 기준으로*/
}
h1{
    color: #fff;
    font-size: 120px;
    text-shadow: 2px 3px 0 #000;
    position: absolute;
    right: 100px;
    bottom: 100px;
}

시맨틱(의미론적인, 의미가 통하는) 태그: 문서의 구조를 만듦. HTML태그

  • 화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해할 수 있다.
  • 문서 구조가 정확히 나눠지므로 PC나 모바일 등 다양한 화면에서 웹 문서를 표현하기가 쉽다
  • 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.

<header>: 헤더 영역, 사이트 전체의 헤더or 특정 영역의 헤더, 검색창이나 사이트 메뉴 삽입

<nav>: 내비게이션 영역, 웹 문서 위치에 영향을 받지 않음, 문서 안에 여러 개 만들 수 있음.(id로 구분)

<main>: 핵심 콘텐츠를 담는다. 웹문서에서 핵심이 되는 내용, 웹 문서마다 다르게 보여주는 내용으로 구성, 웹 문서에서 한번만 사용

<article>: 독립적인 콘텐츠를 담는다. 독립된 웹 콘텐츠 항목(따로 떼어도 콘텐츠가 되는 내용), <section>태그를 포함할 수 있음

<section>: 콘텐츠 영역을 나타낸다. 몇 개의 콘텐츠를 묶는 용도로 사용, css 적용을 위해 묶는 용도(<div>)로 쓰지 말것 

<aside>: 본문 내용외에 왼쪽이나 오른쪽 혹은 아래쪽에 사이드 바 표시, 필수 요소가 아니므로 필요할 경우에만 사용

<footer>: 푸터 영역을 나타냄. 자이트 제작 정보나 저작권 정보, 연락처 등, 다른 시맨틱 태그 사용해 다양한 정보 포함

<div>: 여러 소스를 묶는다. 소스를 묶는 용도, 영역을 구별하거나 스타일 적용하기 위해

레이아웃: 웹 사이트의 정보와 내용을 보기 편하게 한 화면에 나누어 디자인한 것.

*{
    box-sizing: border-box; /*테두리까지 포함해서*/
}
#container{
    width: 1200px; /*내용 전체의 너비*/
    margin: 20px auto; /*내용을 화면 가운데 배치하도록*/
}
#header{
    width: 100%; /*부모 요소의 너비와 똑같게*/
    height: 120px; /*헤더의 높이*/
    background-color: #acacac;
}
#sidebar{
    width: 300px;/*사이드바 너비*/
    height: 600px;/*사이드바 높이*/
    background-color: #e9e9e9;
    float: left;/*왼쪽으로 플로팅*/
}
#contents{
    width: 900px;/*본문의 너비*/
    height: 600px;/*본문의 높이*/
    background-color: #f7f7f7;
    float: left;/*왼쪽으로 플로팅*/
}
#footer{
    width: 100%;/*부모 요소의 너비와 똑같게*/
    height: 100px;/*푸터의 높이*/
    background-color: #888888;
    clear: left;/*플로팅 해제*/
}

 

'HTML+CSS+자바스크립트' 카테고리의 다른 글

자바스크립트  (0) 2023.05.25
CSS고급 선택자  (0) 2023.05.24
p.233,234,235 예제  (0) 2023.05.22
p.191, 192 예제  (0) 2023.05.22
CSS의 기본(1)  (0) 2023.05.22
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>webtrend</title>
    <style>
        ul{
            list-style: none;
            line-height: 200%;
        }
        strong{
            color:#ad3000;
        }
        #container{
            width: 600px;
            margin: 20px auto;
            border: 1px solid #000;
            background-color: #000;
        }
        h2{
            color: white;
            text-shadow: 3px 2px 5px black;
        }

        table,td,th{
            caption-side: bottom;
            border: 1px solid black;
            padding: 10px;
            border-collapse: collapse;
        }
        .heading{
            background-color: #eee;
        }

    </style>
</head>
<body>
    <h1>최신 웹 디자인 트렌드</h1>
    <ul>
        <li><strong>반응형 웹 디자인</strong> - 다양한 화면 크기에 최적화하다.</li>
        <li><strong>플랫 디자인</strong>- 입체에서 평면으로</li>
        <li><strong>풀 스크린 배경</strong>-콘텐츠에 집중</li>
        <li><strong>원 페이지 사이트</strong>-한페이지에 모든 내용을 담다.</li>
        <li><strong>패럴랙스 스크롤링</strong>- 동적인 효과로 강한 인상을!</li>
        <li><strong>웹 폰트</strong>-웹 타이포그래피를 받쳐주는 기술</li>
    </ul>
    <div id="container">
    <h2>웹 개발 기초</h2>
    </div>
    <p></p>
   
    <table>
        <caption>2019 국민 독서 실태</caption>
        <tr>
            <th><span class="heading">구분</span></th>
            <th><span class="heading">성인</span></th>
            <th><span class="heading">독서자</span></th>
        </tr>
        <tr>
            <th><span class="heading">종이책</span></th>
            <td>6.1권</td>
            <td>11.8권</td>
        </tr>
        <tr>
            <th><span class="heading">전자책</span></th>
            <td>1.2권</td>
            <td>7.1권</td>
        </tr>
        <tr>
            <th><span class="heading">오디오북</span></th>
            <td>0.2권</td>
            <td>5.5권</td>
        </tr>
    </table>
</body>
</html>

'HTML+CSS+자바스크립트' 카테고리의 다른 글

자바스크립트  (0) 2023.05.25
CSS고급 선택자  (0) 2023.05.24
CSS,박스 모델  (0) 2023.05.23
p.191, 192 예제  (0) 2023.05.22
CSS의 기본(1)  (0) 2023.05.22
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>상품 소개 페이지</title>
    <link rel="stylesheet" href="../css/mystyle-result.css">
</head>
<body>
    <h1>웹 기술-기본</h1>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript 기초</li>
    </ul>
</body>
</html>
h1{
    display: inline-block;
    background-color: #222;
    color: #fff;
    padding: 10px;
}
ul{
    list-style: none;
}
li{
    font-size: 1.2em;
    line-height: 1.5em;
    color: blue;
}

 

'HTML+CSS+자바스크립트' 카테고리의 다른 글

자바스크립트  (0) 2023.05.25
CSS고급 선택자  (0) 2023.05.24
CSS,박스 모델  (0) 2023.05.23
p.233,234,235 예제  (0) 2023.05.22
CSS의 기본(1)  (0) 2023.05.22

스타일(style): HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킴.

반응형 웹 디자인 : PC, 모바일과 상관없이 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법. 하나의 웹문서에서 작동하도록하는 것이 스타일의 역할. 배치가 달라짐.

 

CSS스타일의 형식

[선택자 {속성1: 속성값1; 속성2: 속성값2; }]  //속성1: 속성값1 = 스타일 규칙.

 

p(타입 선택자: 스타일을 어느 태그에 적용할지 알려줌){(괄호 안에 스타일 정보)
text-align(텍스트 정렬 속성): center(값);
color(글자색 속성): blue(값);
}

 

스타일 규칙

;으로 구분하고 {} 안에 나열함.

스타일 주석:  /**/으로 여러줄 주석이 들어감.

 

  • 스타일 시트: 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한군데 묶어놓은 것
  • 브라우저 기본 스타일: HTML만 줬을 때, 웹 브라우저에 표시할 때는 기본 스타일 사용.
  • 인라인 스타일: 스타일 시트를 사용하지 않고 태그에 직접 표시함. style="속성: 속성값;"을 줌. 
  • 내부 스타일 시트: 문서 전체에 동일하게 적용할 스타일. <head> 태그 안에 정의 <style>,</style>태그 사이에 작성.
  • padding: 내부 여백, 시계방향.
  • 외부 스타일 시트: 다른 페이지에도 동일하게 필요할 때 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용. *.css 파일 확장자 사용.
  • [<link rel = "stylesheet"   href= "외부 스타일 시트 파일 경로">]

내부 스타일 시트

<head>
    <meta charset="UTF-8">
   
    <title>레드향 샐러드 레시피</title>
    <style>
        p{
            padding: 10px;
            background-color: #222;
            color: #fff
        }
    </style>
</head>

외부 스타일 시트

<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
    <link rel="stylesheet" href="../css/h1.css">
</head>

CSS기본 선택자//잘 기억 요소를 찾을 때 사용

전체 선택자: 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용. 웹브라우저의 기본 스타일을 초기화할 때 자주 사용.

margin: 외부 여백. 브라우저에 맞게 margin:0은 여백없이 출력.

태그: 태그자체

요소: 태그를 포함해 <p>태그를 적용한 '텍스트 단락 지정하기' 부분을 p 요소.

타입 선택자: 문서에 특정 태그를 사용한 모든 요소에 스타일이 적용됨.

[태그명{ 스타일 규칙 }]

class 선택자: 요소의 특정 부분에만 스타일 적용. 문서안에서 여러번 반복할 스타일이라면 클래스 선택자로 정의.

span은 오로지 스타일을 적용하기 위한 태그.

[.클래스명{ 스타일 규칙 } ]

 p{
            font-style: italic;/*이탈릭체*/
        }
        .accent{
            border: 1px solid #000; /*테두리*/
            padding: 5px;/*테두리와 내용 사이의 여백*/
        }
        .bg{
            background-color: #ddd;/*배경색*/
        }
<p class="accent bg">재료: 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<li><span class="accent">레드향과 아보카도, 토마토</span>도 먹기 좋은 크기로 썰어둡니다.</li>

헷갈린 부분: 내부 스타일 시트와 타입 선택자의 차이-> 내부 스타일 안에 타입 선택자가 존재.

 

id 선택자: 요소의 특정 부분에만 스타일 적용, #다음에 id 이름 지정,문서 안에서 한번만 사용(유일 값) (클래스 선택자와의 차이)

[#아이디명 { 스타일 규칙 }]

auto : 균등하게 줌(가운데 정렬)//전체: 1000px 사진: 500px 좌우: 250px

<head>
    <meta charset="UTF-8">
    <title>레드향</title>
    <style>
        #container{
            width: 500px;/*너비*/
            margin: 10px auto;/*중앙 배치*/
            padding: 10px;/*테두리와 내용 사이 여백*/
            border: 1px solid #000;/*테두리 굵기와 색깔*/
        }
        #fontcolor{
            color: red;
        }
    </style>
</head>
<body>
    <div id="container">
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p><span id="fontcolor">레드향</span>을 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>

그룹 선택자: 같은 스타일을 사용하는 선택자를 한꺼번에 정의, 쉼표(,)로 구분해 여러 선택자를 나열

[선택자1, 선택자2 { 스타일 규칙 }]


캐스케이딩 스타일 시트: 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정.

스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타이을 적용.

 

스타일 상속: 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달합니다. 

//위에서 아래로(인터프리터 방식 중첩 적용되면 아래있는 것이 최종적)

 

원칙1: 스타일 우선 순위

1.얼마나 중요한가.

사용자가 지정한 스타일(), 제작자 스타일(웹 사이트를 만들 때 제작자가 만든 스타일), 웹 브라우저가 기본으로 정해 놓은 스타일(기본 스타일)

2.얼마나 한정지을 수 있는가.

!important(어떤 스타일보다 우선 순위), 인라인 스타일(해당 태그에만 적용되는 스타일. 문서 안에서 한번만 사용됨), id 스타일(특정 부분에만 적용되는 스타일. 문서 안에서 한번만 사용됨), 클래스 스타일(특정 부분에만 적용되는 스타일. 문서 안에서 여러번 사용됨), 타입 스타일

3.소스 순서에 따라

나중에 온 스타일이 먼저 온 스타일을 덮어씀.

 

원칙2: 스타일 상속

자식요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식요소로 전달되는 것.

<style>
        p{
            color: black;
        }
        h1{
            color:brown !important;
        }
        p{
            color: blue;
        }
    </style>
    <link rel="stylesheet" href="../css/p.css">
</head>
<body>
    <div id="container">
    <h1 style="color: green;">레드향</h1>
    <p style="color: red">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p><span id="fontcolor">레드향</span>을 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>

클래스와 id는 중첩되어 자주 사용.


font-family: 웹 문서에서 사용할 글꼴,글꼴이 없을 경우를 대비해서 하나 이상 지정.

[font-family:<글꼴 이름>|[<글꼴 이름>,<글꼴 이름>]]

공백 자체를 가지고 있는 글꼴은 큰 따옴표로 묶음 //"맑은 고딕"

속성값을 나열할 때 값이 아니라 유형이라면 < >로 묶습니다. 이때 속성을 유형처럼 사용 가능합니다.

[font-size:<절대 크기>|<상대 크기>|<크기>|<백분율>  ]   //반드시 단위가 필요.px,pt,%,em(1em=16px=12pt)등 -는 사용 불가능, 부모 요소의 클자 크기를 시준으로 상대적인 글자 크기 지정

[font: <font-style><font-variant><font-weight> ]

font-style: 이탤릭체로 글자 표시

[font-style : normal |italic|oblique]

font-weight: 글자 굵기

[font-weight: normal|bold|bolder|lighter|100|200|..|800|900]

h2{
            font-size: 30px;
            font-weight: 300;
        }
        .italic{
            font-style: italic;
            font-family: "맑은 고딕", 돋움, 고딕;
        }

 

웹 폰트: 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에  접속하면 글꼴을 사용자 시스템으로 다운로드 시켜 사용하는 글꼴. 

[@font-face{

font-family: <글꼴 이름>; //파일명

src: <글꼴 파일>[<글꼴파일>,<글꼴파일>,...]; ]

<head>
    <meta charset="UTF-8">
    <title>목록 나열하기</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
    h1{
        font-family: 'Nanum Pen Script', cursive;
    }
</style>
</head>

 

color 속성: 글자 색 지정. 색상값 뒤에 a는 투명도.

속성값: 16진수(#000000:검정, #ffffff: 흰색), rgb, hsl, 색상이름 

[color: <색상>]

rgb, rgba: 0~255, a는 불투명도 0~1

[h1{ color: rgb(0,0,255)}]

[h1{ color: rgba(0,0,255,0.5)}]

hsl, hsla: 채도(0% 회색톤, 100% 원래색), 명도(0% 가장 어두움, 50% 원래색,100% 흰색)

[hsl(0,100%,50%)는 빨간색]

 

 li{
            color: #065322
        }
h2{
            color: rgba(0, 0,255, 0.5)
        }

 

text-align: 텍스트 정렬

[text-align: start | end | left | right | center | justify | match-parcent ]

 

line-height: 줄 간격 조절

[lint-height:2.5; ] 글자 크기의 2.5배

텍스트를 세로로 가운데 정렬: line-height를 height값과 값이 사용.

 

text-decoration: a태그에 주로 사용(하이퍼링크 제거에 사용)

 

text-shadow: 텍스트에 그림자 효과를 추가.

[text-shadow: none | < 가로거리 > < 세로거리 > < 번짐 정도 > < 색상 > ]

가로거리: +오른쪽, -왼쪽

세로거리: + 아래, - 위

번짐정도: 양수값 크게, 음수값 작게(기본값 0)

색상: 현재 글자색이 기본값.

 

text-transform: 텍스트의 대소문자 변환(capitalize: 첫번째 글자, uppercase: 모든 글자 대문자, lowercase: 모든 글자 소문자)

 

letter-spacing: 글자와 글자 사이의 간격 조절

word-spacing: 단어와 단어 사이 간격 조절

 

list-style-type : 불릿의 모양이나 번호 스타일을 지정가능.(none은 제거)

list-style-image: 불릿 대신 이미지를 사용

[list-style-image:<url(이미지 파일 경로)>|none]

list-style-position: 목록 들여쓰기, 내려쓰기.(outside: 기본값, inside: 기본 위치보다 안으로 들여씁니다.)

[list-style-position: inside | outside ; ]

위에 3가지가 합쳐서 list-style

ol태그: 주로 메뉴 만들 때

<head>
    <meta charset="UTF-8">
    <title>회사 소개</title>
    <style>
         ul{list-style:none;}
         li{
            width: 300px;
            padding: 20px 40px;
            margin: 5px;
            border: 1px solid #000;
         }
    </style>
   
</head>

caption-side: 표 제목의 위치를 정해 줌.

[caption-side: top | bottom]

border: 표에 테두리를 그려 줌.

border-spacing: 셀 사이의 여백 조절 0이면 여백이 없어짐

[ border-spacing : 수평거리 수직거리 ]

border-collapse: 표와 셀 테두리를 합쳐준다.(자주 사용 중요)

[border-collapse: collapse|separate(따로 표시가 기본값)]

 

 

'HTML+CSS+자바스크립트' 카테고리의 다른 글

자바스크립트  (0) 2023.05.25
CSS고급 선택자  (0) 2023.05.24
CSS,박스 모델  (0) 2023.05.23
p.233,234,235 예제  (0) 2023.05.22
p.191, 192 예제  (0) 2023.05.22

+ Recent posts