Tiny Bunny

본문 바로가기

💻92

박스 모델 속성(margin, border, padding, content) [ 박스모델 ] 박스모델은 CSS에 포함되는 모든 요소의 외장이고, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 한다. - 박스 모델은 html 요소가 사각형 박스에 둘러 쌓여있음. - 박스 모델은 'margin- border- padding- content' 로 구성 margin 요소 외부 여백 border 요소 테두리(경계선) padding 요소 내부 여백 content 요소 내용 각 영역별로 그 특징과 어떤 변화값을 줄 수 있는지 알아보자. 1. Margin 영역 영역에서 margin 크기를 설정 한 모습 [여러 속성 사용법] margin-top: margin-bottom: margin-left: margin-right:.. 2024. 1. 7.

텍스트 속성들 정리 / textarea 고정하는법 1. 체크박스 다음을 만들기 위해 사용된 코드는 이렇다. html은 저번에 사용했던 틀과 동일하다. ㄴ 체크하면 지정된 label의 색상을 변경하겠다는 의미색은 빨간색으로 설정했다. 사용된 +a 여러 텍스트 속성들을 정리해보자면, 1. font-size: 사이즈px 2. font-weight: 3. font-family: 글꼴 유형; 유사 유형 4. font-style: 5. font-variant: 6. Color: 7. text-decoration: 8. letter-spacing: (normal =웹브라우저 기본값) 9. line- height: 10. text-align: 이렇게 앞으로 css에서 자주 사용될 text 꾸미기 속성들을 몇 가지 정리해보았다! 2. 로그인/ 메모 박스 저번에 .. 2024. 1. 7.

CSS적용방식 / 내부스타일 시트, 외부스타일 시트, 인라인스타일 드디어 CSS 시작 ! 먼저 css의 문법 기본틀은 이렇다. 선택자{속성: 값;} ex) p{color:green;} 위 안에 있는 세 개의 문단들을 각각 다른 방식을 적용해서 글자 색상을 변경해보겠다.ㅎㅎ 글자의 색을 바꾸는 문법의 종류에는 세 가지가 있다. 내부 스타일 시트/ 외부 스타일 시트/ 인라인 스타일 1. 내부 스타일 시트 - 태그를 사용, html 문서에 바로 적용함. - 태그 내에 작성함. 태그를 태그를 사용하여 내부 스타일 시트 방식으로 변경 완료. 이 밖에 내부 스타일 시트 2. 외부 스타일 시트 (*가장 많이 사용) - 외부에 있는 .css(stylesheet 파일) 문서를 연결함. -실무에서 사용, 가장 많이 사용 -안에 외부의 .css문서 파일 링크와.. 2024. 1. 7.

HTML로 로그인 창 뼈대 만들어보기 웹 사이트에 로그인 할 때 우리가 자주 마주하는 로그인 창을 지금까지 익힌 html로 만들어보기 도저어언! 완성한 코딩 ! -다른 웹사이트 계정으로 연동할 수 있는 소셜로그인 창도 만들어주고, sign in with google 이미지도 가져와서 ★ 로 바로 연결 될 수 있게 넣어주었다. ★password는 입력할 때 'for 속성값'과 'id 속성값' 이 같아야한다. (입력 시 ·······라고 입력됨) - 최종 저장하기 전에 수정을 했었나보다,,ㅎ누락된 태그를 여기에 적어보면 or Forgot your password? 이렇게 적으면 로그인 창 아래에 id/pw를 잊어버렸을 때 찾을 수 있는 링크로 연결되는 버튼을 만들 수 있다.! (아직 id/pw를 찾을 수 있는 웹은 존재하지 않.. 2024. 1. 7.

나무위키st 목록표 만들어보기 나무위키에 들어가면 보기쉽게 작성된 목록표를 구현해보고자 도전 ..! (아직 HTML만 배운 상태로 하는 거라 CSS나 JS은 적용하지 않은 상태다. 큰 틀만 짜여있는 결과물이라고 생각하면 된다.) / 과 의 구분과 경계를 명확히 하는게 조금 헷갈렸지만, 세로열로 그어진 일직선을 따라.... , 짝(?) 잘 찾아주기. / a 태그를 통해 연결 될 실제 나무위키 링크도 넣어보았다 . ㄴ그렇게 완성한 html 뼈대의 모습이다. ㄴ 이렇게 해당 글자를 클릭하면 바로 해당 페이지 링크로 연결된다. +css랑 JS 배워서 다시 완벽하게 구현하러 와야지. ^^ 2024. 1. 7.

링크와 이미지 넣기 - src속성, alt속성, 이미지 링크(img) 1)img 태그와 alt 속성/ 이미지 경로 표시 여기에서 주의할 게 바로, "src 속성" 이다. src 속성 -> 삽입하려는 이미지의 경로 ★★★★ 기준 : 실행되는 HTML 파일의 위치 ! -html 파일의 위치를 기준으로 '이미지 파일의 경로'를 나타낸다. ★★ html파일과 같은 위치(현재 폴더) 에 있는 경우 사용하는 ./ 은 생락할 수 있음. ../ 은 상위 폴더에 있던 이미지파일을 불러온 것이고, ./은 html과 동일한 폴더에 있는 이미지 파일을 불러오는 상황이다. 짠! 이렇게 내가 설정한 이미지를 삽입했다. 2) 이미지 링크 -이미지 링크란 html에서 해당 이미지를 클릭하면 특정 웹 사이트로 이동할 수 있는 링크다. 지금부터 우리가 모두 잘 알.. 2024. 1. 7.

목록 만들기 <ul,ol,dl 태그> html에서 주로 사용되는 세 가지 목록 태그에 대해서 알아보자. 1) ul 태그 -(unordered list) -순서 없는 목록 생성, 나열시 사용함. - 로 목록 내용 구성 2) ol 태그 -(ordered list) -순서가 존재하는 목록 생성 시 사용함. - 로 목록 내용 구성 오호라.. 나중에 to do list + 운동 기록 등을 할 수 있는 웹 제작할 때 사용해볼까 3) dl 태그 -dl(decription list) , dt(description term), dd(description details) 태그 사용 -정의형 목록에 사용( 용어 설명 나열) 2024. 1. 7.

Visual Studio Code/ 여러 태그들 2023.06.16 코딩 공부 시작 ! Today's Summary오늘 익힌 html 여러 태그들 태그가 들어갈 곳 -대략적인 커다란 틀이라고 볼 수 있다. 이제 여기에 각종 태그들을 추가한다.-html 기본구조 -> DTD, html, title, body 1) DTD 문서형 정의2) 언어3) 9) 10) 중요, 강조에 따라 n :1부터 시작 / 순서대로, 건너뜀 x11) 12)13) 본문의 문단 작성 시 사용14) 줄 바꿈15)16) 17) 인용; 문단 단위 텍스트 18) 19) 20) 21) 22) 인용; 짧은 인용문 23) 24) 25) 삭제 테스트 추가 텍스트 26) 아래 첨자 > 27) 위 첨자 28)29) 30) 첫 결과물..ㅎㅎ 사진 설명.. 2024. 1. 7.

이전 1 ··· 5 6 7 8 다음

티스토리툴바