코딩하는 김딸기

1. 기본구조 작성하고 레이아웃 분석하기DOCTYPE html>html>    head>        title>Foxtitle>        link rel="stylesheet" href="foxstyle.css">    head>        body>        div class="wrapper">            contents        div>    body> html>->하나의 큰 덩어리로 구성되었으며 클래스를 wrapper로 지정한다 2.  마진 초기화body{    margin: 0;}p{    margin: 0;}h1{    margin: 0;} 3. 각 레이아웃의 스타일 설정.wrapper{    box-shadow:  0 0 20px red;    width: 300px; ..

CLI 실습 컴퓨터에게 내가 누구인지 물어봅니다. 코드보기Bash복사whoami ​ 루트 디렉토리로 이동한 후 현재 위치를 확인합니다. 코드보기Bash복사cd pwd ​ 실습을 위한 techit-school 디렉토리를 생성합니다. 코드보기Bash복사mkdir techit-school ​ 생성한 techit-school 디렉토리로 이동합니다. 코드보기Bash복사cd techit-school ​ techit-school 디렉토리 하위에 다음과 같은 디렉토리와 파일을 생성합니다.  ALT 코드 보기Bash복사mkdir learn-cli learn-cli/images learn-cli/js learn-cli/styles touch learn-cli/index.html learn-cli/images/logo.sv..

CLI(Command Line Interface)란?CLI(명령줄 인터페이스)는 디렉토리 생성 및 이동, 복사, 이름 변경, 삭제 등을 미리 약속된 명령어를 사용하여 실행하는 환경입니다.운영체제는 기본적으로 CLI를 제공하고 있으며 Windows의 경우 CMD(Command Prompt)를 Mac OS나 Ubuntu의 경우 Terminal을 사용하여 명령어를 통해 일련의 작업을 진행할 수 있습니다.그러나 Windows의 CMD와 Mac OS의 Terminal에서 지원하는 CLI 명령어가 다르기 때문에 각 운영체제 환경에 맞는 명령어를 학습하는 것이 필요합니다.예를 들어 파일을 삭제할 때 Windows의 CMD에서는 del 명령을 Mac Os의 Terminal에서는 rm 명령을 사용하여야 합니다. 만약 W..

작업 순서 정립하기1. 기본 html, css 세팅2. 덩어리 확인해 레이아웃 구성하기- div 내에서의 레이아웃 덩어리는 3가지(헤더, 컨텐츠, 푸터)로 나뉜다3. 각 데이아웃안에 컨텐츠를 삽입 div{    background-color: #ddd;    width: auto;/*auto: 브라우저가 창 너비만큼 자동으로 계산해주는 값*/    height: auto;/*내부 컨텐츠 크기만큼 자동 계산*/}-각 레이아웃 덩어리를 구분하기 위해 backgraound 색을 지정해 시각화한다 /*css 리셋*/body{    margin: 0;}-body에 margin이 임의의 값으로 설정되 어 있을 수 있으므로 margin을 0으로 초가화해준다 margin automargin속성에 대한 값을 auto로 ..

1. 기본 html 세팅DOCTYPE html>html>    head>    head>    body>    body>   html> 2. 내용을 입력하기 전에 덩어리인 div를 먼저 마크업해 레이아웃을 구성한다    body>        div> /*덩어리부터 먼저 생성*/            img src="cat.png">            h1>cath1>        div>    body>  3 레이아웃을 위해 css에서 배경색을 지정해 공간차지를 시각적으로 확인한다 컨테이닝 블록: 부모요소가 자식요소에게 제공해주는 콘텐츠 영역가용공간: 사용가능한 공간 div는 컨테이너에 의해 width auto가 가득차게 표현된다.    /*margin 단축속성*/    margin: 0 auto; /..

속성 상속            div{                background-color: white;                               width: auto; /*부모 너비 기준 확장*/                height: auto;/*자식 너비 기준 확장*/                width: 400px;                                margin: 100px auto;/*박스 외부 여백의 위아래는 0, 좌우는 auto로 설정*/                padding: 40px;/*박스 내부의 상하좌우 여백 지정*/                                border: 10px solid orange; /*박스의 테두리 ..

독타입에 대한 이해DOCTYPE html>최신 html인 표준기준으로 동작하게 함->문서를 최신버전으로 함을 정의 HTML 작성의 목적태그DOCTYPE html>html>    head>        title>Fruitstitle>    head>    body>        h1>orangeh1>    body>html>-시작태그와 종료태그 사이에 내용을 삽입함-html태그(부모요소) 안에 head, body태그(자식요소) 들어감 -> head, body태그끼리는 형제요소 요소(element)body>contentsbody>-시작태그에서 마지막 태그까지를 한번에 요소라고 한다.-head안에는 제목이 삽입되며 창에는 보이지 않는다-body안에는 내용이 삽입되고 이는 화면에 표시된다 태그h1: 문서의 제..