본문 바로가기

기록/수업정리_html

반응형
반응형 2024. 7. 4. VIEWPORT기본적으로 html에 들어가는 요소이고 content의 넓이를 디바이스의 넓이에 맞춘다고 이야기 해주는것이다. 이것의 크기 비율은 1.0으로 기본적인 요소이다.확대 할떄의 크기를 설정하는것으로 최대 5까지 가능하다 해당 코드는 확대하지 않는다는 의미이다. 그리고 최소 축소 크기도 지정할 수 있는데 해당 코드는 축소하지 않겠다는 뜻으로 늘리거나 줄이지 않겟다는 의미가 된다. 이상태에선 hover는 되지 않는다 스마트폰 모드이기 때문에줄이는건 괜찮지만 늘리는건 늘어나지 않는데 이는 이미지의 크기를 넘어가서 이다. max-wieht 가 이런 성질을 가지고 있다.반응형 작업을 할때는 초기화 작업으로 꼭 img에 max-width를 설정해야하고 본래 작업할때도 이미지를 커다랗게 만들어서 잘리거나 부..
Grid
Grid 2024. 7. 2. Grid        .container{            border: 10px dashed #ccc;            width: 600px; height: 600px;            margin: 50px auto;            /* display: grid; */        }        .item{            border: 5px solid orangered;            padding: 20px;            font-size: 20px;            display: flex;            justify-content: center;            align-items: center;        } 그리드를 지정하지 않고 아이..
hover, 웹 폰트 아이콘 적용법, form 태그
hover, 웹 폰트 아이콘 적용법, form 태그 2024. 6. 20. hover 스타일 속성은 마우스 커서를 가져다댓을때 변하도록 적용되는 속성으로 어떤 태그나 클래스에 커서가 갔을때 적용되도록 설정한다. hover를 적용하는 위치도 중요한데 경로와 위치를 잘 설정해주어야 한다. ex : .list:hover .txt{} - list 클래스를 선택시 변화되어 txt가 보인다.       .list a:hover{ color : #fff } - a 태그에 커서를 대면 설정한 속성(color -#fff)으로 변화한다. 아이콘을 적용하는 방법 1. svg로 저장(이미지 : 수정시 피그마나 따로 변경 프로그램으로 해야함, html code : 색상변경등 유동적이다.)하여서 가져오기 - 용량이 작고 어떤 디바이스든 형태가 잘 유지된다. 2. web font (font는 기본적으로 ..
position_sticky
position_sticky 2024. 6. 19. - position_stickyvh 단위는 viewport를 의미하는데 브라우저에서 보이는 크기정도를 말하는것이다.style>        *{margin: 0; padding: 0;        box-sizing: border-box;}        .sec{height: 100vh;}        .sec1{background: beige;}        .sec2{background: pink;}    style>head>body>    section class="sec sec1">        div class="box static">div>        div class="box absolute">div>        div class="box fixed">div>        div clas..
position 활용
position 활용 2024. 6. 18. style>        .ex{            width: 600px;            border: 5px solid #333;            margin: 100px;        }        .box{            width: 400px;            padding: 50px;            background: #eaeaea;            border-top: 3px solid hotpink ;        }    style>기본적으로 내용을 입력하게 되면 왼쪽 상단이 디폴트 값이기 때문에 위와 같이 나온다. 디자인상으로 텍스트 박스를 중앙 위로 올리고 싶을때 사용하는것이 position : relative이다. 해당 위치에서 옮길거기 때문에 딱히 ..
사이트 제작_html, position 속성
사이트 제작_html, position 속성 2024. 6. 17. 코딩을 하는데 있어서 중요한 순서  1. html 구조 작성 2. 스타일 시트(CSS)를 작성 - 사이트 작업시에느 외부스타일로 작성하고 따로 폴더를 만들어서 작업해야한다.3. images 폴더 같은 폴더에 있지 않으면 경로에 문제가 생기기 때문에 이미지가 로딩되지 않는 경우가 있기 때문에 항상 같은 같은 폴더에 이미지 css 등 따로 폴더를 만들어서 진행해야한다. - 브랜드 페이지 제작html을 작성하는데 있어서 기본적으로 들어가는 레이아웃을 먼저 잡아주고 시작하는것이 기본이다.헤더가 여러가지 컨텐츠가 들어가 있을 경우 행을 나눠 진행한다. (위는 로고가 있는 1행과 네비가 있는 2행으로 나뉜다.) 또한 기본적으로 코딩은 왼쪽에서 시작해서 가는것이 기본이지만 접근성에 따라서 읽어야 하는 중요도에 따라서..
플랙서블 박스
플랙서블 박스 2024. 6. 13. 5번은 마진 레프트 라이트가 각각 들어가는거고 (설정한 값만큼)6번은 각각 컨텐츠의 여백을 똑같이 주는거다(공간에 따른) 5,6번이 비슷해보이지만 차이가 있다.플랙스의 기본 값으로 자손은 부모의 값을 따라가게 된다.5번은 글자 크기를 기준으로 하여 위치를 맞추는 것이다.순서변경 flex-basis : 부모의 크기를 줄어들때 자손의 크기를 어떻게 할지 정하는것것기본 크기는 항상 200으로 하겟다는 뜻 기본값을 지정하는것이다.                padding: 20px;                background: tomato;                color: #fff;                border: 1px solid #2a0c0c;                width: 20..
background, gradient, display
background, gradient, display 2024. 6. 12. a:hover - a 태그에 해당 되는 스타일을 넣어주게 되면 커서를 가져다댈 경우 색이 변하도록 하는 css이다.많이 쓰이기 때문에 기억해두자부모에게 백그라운드 이미지를 주고 자손에게 마진 탑을 주게 되면 마진 자체가 흡수되어서 이미지가 같이 밀려나게 되고 그렇기 때문에 padding을 주는것이 좋다.px - 절대 단위 % - 상대 단위background-size : contain; - 가로 세로중 짧은 쪽에 크기가 맞춰진다. (주로 세로에 맞춰진다.) background-size :  cover; - 가로세로중 긴쪽에 맞춰지게 된다. 다만 짧은쪽 이미지가 잘릴수 있기 때문에 디자인 할때 조금 크게 디자인 하기도 한다. 기본적으로 이미지를 불러오면 'auto'로 지정되어 있다. (이미지 고유의 사이즈로..
border_radius, background 설정
border_radius, background 설정 2024. 6. 11. - border-radius  border-radius : 테두리를 둥글게 만드는 태그 margin과 같이 순서는 왼쪽상단부터 차례대로 시계방향으로 설정한다. 모든면을 같은 값으로 주고 싶을때는 하나만 입력하고 위아래, 왼쪽오른쪽이 같을때는 하나씩만 설정하면 된다. 원으로 만들고 싶을땐 넓이 높이를 같게 설정하고 설정값의 1/2 값만큼 작업하면 된다. (ex : width : 200px height : 200px border-redius : 100px or width : 200px height : 200px border-redius : 50%)작업하는 컨텐츠를 중앙에 배치하기 위해서는 양옆에 auto를 넣어주면 디바이스 크기에 상관없이 자동으로 중앙배치가 된다.후손 선택자 - 클래스 안에 해당되는 선택자..
list style, margin, padding, border style
list style, margin, padding, border style 2024. 6. 5. - list 태그 종류 list-style-type: lower-roman > 로마소문자 / none > 아무것도 표시하지 않음list-style-image : url(파일 로드) + inside _ 안으로 들여넣어주기 앞에 별다른 코드 없이 그냥 속성으로 사용도 가능하고 같은 태그에 사용이 가능하다 (다 블럭태그) 해당 언어를 입력하고 웹으로 확인하게 되면 박스형식으로 웹이 지정되어 있는것을 확인 할 수 있다. block 태그는 브라우저 전체 (넓이 높이를 지정하지 않는다면) inline은 해당 컨텐츠 자체의 크기를 의미한다.블럭 태그는 브라우저의 크기와 넓이에 따라 크기가 변하지만 인라인은 해당 텍스트에만 적용 되기 때문에 크기를 설정해도 인지하지 못하고 auto로 적용된다. 여기서 블럭 태그에게 ..

티스토리툴바