코딩하는 김딸기

1. 레이아웃 설정DOCTYPE html>html>    head>        title>My Bucket Liststitle>        link rel="stylesheet" href="bucketstyle.css">    head>    body>            body>html>   2.body내부의 덩어리 레이아웃 분석하고 컨텐츠 삽입body>        div class="wrapper">             section class="Bucketlist">                header class='Bucketlist-header'>                    h1>My Bucket Listh1>                header>               ..

Cascade,Selector Specificity다른 이름: 선택기 특이성, 특수성, 특이도캐스케이드는 브라우저에 내장된 체계로, 여러 곳에서 작성된 스타일 규칙이 하나의 요소에 반영될 때 어떤 스타일 규칙이 최종적으로 반영 될지를 결정합니다. 이 과정에서 셀렉터 특정성 점수, 인라인 스타일시트, !important 규칙, 코드 작성 순서등의 요소들이 고려됩니다.셀렉터 특정성 점수는 캐스케이드 체계가 동작하는 데 있어 가장 핵심적인 구성 요소입니다. 셀렉터가 작성된 형태에 따라 우선순위가 결정되며, 높은 우선순위의 셀렉터에 작성된 스타일이 최종적으로 적용됩니다.셀렉터의 작성 형태에 따른 특정성 점수 계산h1 { background-color: orange;}h1 { background-color: ..

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; /*박스의 테두리 ..