goshek 님의 블로그

DOCTYPE html>html lang="en">head>  meta charset="UTF-8">  meta name="viewport" content="width=device-width, initial-scale=1.0">  title>response.htmltitle>  link rel="stylesheet" href="./response.css">head>body>      ! 미디어 유형    all(기본값): 모든 미디어 유형에서 적용      >> 컴퓨터(모바일), tv, 인쇄 장치 등    screen: 컴퓨터의 스크린(모바일 스크린 포함)    ! 논리 연산자    and: 여러 조건을 연결해서 추가        (모든 조건을 만족해야 실행)    ,(or): 조건 중에서 하나라도 일치..

DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        #container{        width:150px;        height:150px;        background-color: orange;        border-radius: 50%;        font-size: 16px;        padding: 30px;        /*            all: 모든 변경 가능한 속성에 적용                 각각의 속성명..

DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        div{            display: flex;            height: 100px;            border: 1px solid orange;            /* align-items: stretch; 기본값 */            align-items: center;            /* jusify-content */            justify-conte..

DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        .container{            display: flex;            margin: 10px auto;            padding: 10px;            border: 1px solid #ccc;            width: 80%;            justify-content: space-around;            align-items: flex-st..

DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        .container{            display: flex;            margin: 10px auto;            padding: 10px;            border: 1px solid #ccc;            width: 80%;            justify-content: space-around;        }        .item{         ..

DOCTYPE html>html lang="en">head>  meta charset="UTF-8">  meta name="viewport" content="width=device-width, initial-scale=1.0">  title>practice.htmltitle>  link rel="stylesheet" href="./practice.css">head>body>      : 아래의 주어진 HTML 코드를 사진과 동일하게 변경    ? article 요소    - float 속성 사용    - 너비(350), 높이(200)    - 마진(10), 패딩(10)    ? footer 요소    - float 속성을 제거  -->  section>    h2>강아지 용품 준비하기h2>    arti..

종류 설명 border-box 박스 모델의 가장 외곽인 테두리까지 적용 : 기본값 padding-box 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 content-box 박스 모델에서 내용(콘텐츠) 부분에만 적용 border padding content ..

종류 설명 static 문서의 흐름에 맞춰 배치:기본값 relative static + 위칫값 지정 fixed 브라우저 창을 기준으로 위치를 지정해 배치 absolute relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치 This is paragraph This is paragraph This is paragraph This ..

현대차그룹은 파리대회 양궁경기장인 앵발리드 경기장과 똑같은 시설을 진천선수촌에 건설하도록 했다. 이 경기장에서 국가대표팀은 경기장의 특성을 몸에 익히며 체계적인 연습을 시행했다. 파리대회에서 예상되는 음향, 방송 환경 등을 적용해 모의대회를 치르기도 했다. 특히 현대차그룹이 개발해 제공한 '개인 훈련용 슈팅로봇'과 일대일 대결을 펼치며, 한계에 도전하는 연습을 하기도 했다.또 이번 대회가 열린 앵발리드 경기장에서 약 10여km 떨어진 곳의 스포츠클럽을 통째로 빌려 양궁 국가대표팀만을 위한 전용 연습장을 마련했다. 휴식과 훈련을 위한 시설들이 갖춰진 곳으로, 양궁 국가대표 선수들은 올림픽에 출전하기 위한 통상적인 출국 날짜보다 4일 정도 빠른 7월 16일 출국해 전용 연습장에서 체계적인 훈련을 했으며, 시..

Block Element Inlinle Element Inlinle Element2 Inline Block None Element