티스토리

NewBean의 웹과 콩나무
검색하기

블로그 홈

NewBean의 웹과 콩나무

newbean-j.tistory.com/m

프론트엔드 개발자의 성장일기

구독자
1
방명록 방문하기
공지 문의 (juv6262@naver.co⋯ 모두보기

주요 글 목록

  • box-sizing 속성 box-sizing 속성 1. box-sizing 속성 - 박스 모델에서 요소의 크기를 계산하는 방법을 제어하는 데 사용되는 속성입니다. 2. box-sizing의 주요 값 - content-box (기본값) - 요소의 크기를 요소의 콘텐츠 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠의 크기만을 고려하며, padding 및 border은 요소 크기에 추가됩니다. - border-box - 요소의 크기를 요소의 테두리(border)를 포함한 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠와 padding, 그리고 border까지 고려한 크기가 됩니다. - initial - 기본값으로 설정합니다. - inherit - 부모 요소의 속성값을 상속받습니다. 3. 예.. 공감수 0 댓글수 0 2023. 11. 4.
  • HTML 규약 및 관례 HTML 규약 및 관례 1. HTML 규약 및 관례 - HTML에는 다양한 규약과 최선의 관례가 존재합니다. - 이는 웹 페이지의 명확한 구조 및 내용을 정의하고, 간편한 유지 보수가 가능하며, 웹 접근성 및 크로스 브라우징 문제를 최소화할 수 있습니다. 2. 문서 형식 선언 - HTML 문서의 시작 부분에 적절한 문서형식 선언을 추가해야 합니다. (HTML5 기준) 3. 문서 구조 - HTML 문서는 일반적으로 다음과 같은 구조를 따릅니다. 3. 유요한 HTML - HTML 문서는 유효한 마크업을 가져야 합니다. - W3C Markup Validation Service와 같은 도구를 사용하여, 문서를 유효성 검사할 수 있습니다. 4. 의미 있는 태그 사용 - HTML5에서는 의미 있는 태그를 사용하여,.. 공감수 0 댓글수 0 2023. 10. 28.
  • HTML SEO(검색 엔진 최적화) 기본사항 HTML SEO(검색 엔진 최적화) 기본사항 1. HTML SEO 기본사항 - HTML을 사용하여 웹 페이지를 작성할 때, SEO(검색 엔진 최적화)를 고려하는 것은 중요합니다. - 다음으로는 HTML을 사용한 웹 페이지의 SEO 기본사항입니다. 2. 의미있는 HTML 요소 사용 - 웹 페이지의 구조를 설명하기 위해서는 의미 있는 HTML 요소를 사용해야 합니다. - , , 등을 사용하여, 페이지의 구조를 검색 엔진에 명확하게 전달해야 합니다. 3. 제목 태그 사용 - 태그를 사용하여, 페이지의 제목을 정의해야 합니다. - 이 제목은 검색 결과에서 표시되며, 페이지의 주요 주제를 나타내야 합니다. 웹 페이지 제목 4. 메타 태그 활용 - 태그를 사용하여, 페이지의 메타 데이터를 제공해야 합니다. - de.. 공감수 1 댓글수 1 2023. 10. 21.
  • HTML 유효성 검사 HTML 유효성 검사 1. HTML 유효성 검사 - HTML 문서의 유효성 검사는 문서가 웹 표준에 부합하는지 확인하는 과정임 - 다양한 온라인 도구 or 브라우저의 내장 도구를 사용하여, 유효성 검사를 수행할 수 있음 2. 유효성 검사의 목적 - 크로스 브라우징 지원 - 모든 브라우저에서 일관된 방식으로 페이지를 표시하려면, 표준을 준수해야 함 - 웹 접근성 - 장애인 or 특정 기기를 사용하는 사용자에게 웹 페이지를 쉽게 이해하고 사용할 수 있도록 지원하기 위해 웹 접근성 표준을 준수 - SEO (검색 엔진 최적화) - 검색 엔진은 웹 페이지를 크롤링하고 색인화할 때, 표준을 준수하는 페이지를 선호함 ※ 크롤링 : 웹 페이지에서 정보를 추출하는 프로세스 3. 유효성 검사 방법 - HTML 문서의 유표.. 공감수 0 댓글수 0 2023. 10. 15.
  • NHN CSS 컨벤션 NHN CSS 컨벤션 1. css 속성 선언 순서 (2012년 기준) - 속성 선언 시, 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 순서로 선언 - 관련 속성은 대표되는 속성 다음으로 선언하며, 다음과 같은 표에 표기된 의미 순서대로 선언 순서 의미 대표되는 속성 1 레이아웃 display visibility overflow float clear position top right bottom left z-index 2 BOX width height margin padding border 3 배경 background 4 폰트 font color letter-spacing text-align text-decoration text-indent vertical-align white-sp.. 공감수 0 댓글수 0 2023. 10. 12.
  • role 속성 role 속성 1. role 속성 - 웹 페이지의 접근성을 향상시키기 위해 사용되는 속성 - 해당 요소의 역할(role)을 정의하며, 스크린 리더 등의 보조 기술을 사용하는 사용자에게 콘텐츠를 전달하는 데 도움을 줌 2. 예시 공감수 0 댓글수 0 2023. 9. 25.
  • CSS 기술 순서 CSS 기술 순서 1. mozilla 에서 제안한 CSS 속성 기술 순서 - #1. display - #2. list-style - #3. position - #4. float - #5. clear - #6. width / height - #7. padding / margin - #8. border / background - #9. color / font - #10. text-decoration - #11. text-align / vertical-align - #12. white-space - #13. other text - #14. content 공감수 0 댓글수 0 2023. 6. 26.
  • 시맨틱 웹 (Semantic Web) 시맨틱 웹 (Semantic Web) 1. 시맨틱 웹 (Semantic Web) - 웹 페이지의 구조와 의미를 명확하게 설명하여, 웹 콘텐츠를 이해하고 해석하는 것을 돕는 웹 개발의 접근 방식 - 이를 통해, 검색 엔진 or 웹 에이전트 등이 웹 페이지의 내용을 이해, 분류 등에 효율적 - 또한, 시각 장애인 or 보조 기술을 사용하는 사용자들에게 웹 콘텐츠를 더욱 쉽게 접근 가능하게 함 2. 시맨틱 웹 구조 요소 설명 웹 페이지 or 섹션의 헤더를 정의 내비게이션 링크를 정의 문서의 주요 콘텐츠를 정의 문서의 섹션을 정의 독립적인 콘텐츠를 정의 웹 페이지 or 섹션의 푸터를 정의 공감수 0 댓글수 0 2023. 6. 1.
  • 엔티티 (Entity) 엔티티 (Entity) 1. 엔티티 (Entity) - HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋 2. 엔티티의 종류 엔티티 문자 엔티티 명 16진수 엔티티 숫자 (띄어쓰기) > > & & & " " " ' ' ' 공감수 0 댓글수 0 2023. 6. 1.
  • 콘텐츠 카테고리 콘텐츠 카테고리 1. 콘텐츠 카테고리 - HTML5 부터 비슷한 특징을 가진 요소끼리 묶어 7가지 카테고리로 세분화함 콘텐츠 설명 메타데이터 콘텐츠 (Metadata Content) 문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소 플로우 콘텐츠 (Flow Content) 웹 페이지상에 메타데이터를 제외하고 거의 모든 요소. (보통 텍스트 or 임베디드 콘텐츠를 포함) 섹션 콘텐츠 (Section Content) 웹 문서의 구획(Section)을 나눌 때 사용 헤딩 콘텐츠 (Heading Content) 섹션의 제목(Heading)과 관련된 요소 프레이징 콘텐츠 (Phrasing Content) 문단에서 텍스트를 마크업 할 때 사용 임베디드 콘텐츠 (Embedded Content.. 공감수 0 댓글수 0 2023. 6. 1.
  • 드롭다운 목록 태그 드롭다운 목록 태그 1. select 태그 - select 태그를 사용해 드롭다운 목록을 생성함 - select 태그에는 추가 속성이 존재 - size 속성 : 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정 - multiple 속성 : 드롭다운 메뉴를 중복 선택이 가능함 (ctrl 키를 사용) 2. option 태그 - option 태그로 드롭다운 목록에 표시되는 옵션들을 생성함 - option 태그에는 추가 속성이 존재 - value 속성 : 옵션을 선택 했을 때, 서버로 넘겨질 값을 지정 - selected 속성 : 화면에 표시될 때, 기본적으로 선택되어 있는 옵션을 지정 메뉴판 커피 메뉴 아메리카노 카페 라떼 카푸치노 바닐라 라떼 녹차 라떼 3. optgroup 태그 - 옵션끼리 그룹 지정 - 이.. 공감수 0 댓글수 0 2023. 1. 2.
  • input 태그의 다양한 속성 input 태그의 다양한 속성 1. autofocus 속성 - 폼의 요소 중 원하는 요소에 입력 커서를 표시함 - 웹 요소에 들어가면, 바로 autofocus를 입력한 요소에 마우스가 클릭된 상태로 열림 이름 비밀번호 2. placeholder 속성 - 입력란에 힌트 내용을 표시함 - 사용자가 어떤 내용을 입력해야 하는지 알려 줄 경우에 사용 - 사용자가 내용을 입력하면 placeholder로 입력한 텍스트가 사라짐 전화번호 3. readonly 속성 - 읽기 전용 필드 생성 - 사용자가 입력하지 못하고 읽게만 할 수 있음 영업시간 4. required 속성 - 필수 필드 지정 - 이 속성을 사용하면, 무조건 입력해야 넘어가게 끔 설정할 수 있음 신청자 이름 신청 5. min, max, step 속성 -.. 공감수 0 댓글수 0 2022. 12. 30.
  • input 태그 input 태그 1. input 태그 - 입력 항목 생성 - 태그 안에 있는 type 속성을 이용해 폼 요소를 구분함 - id 속성을 이용하여 폼 요소를 구분할 수 있음 2. text 속성 - 텍스트 필드 생성 - 다음 속성들은 텍스트 필드에서 사용할 수 있는 속성값임 속성 설명 name 텍스트 필드를 구별하는 이름을 설정 size 텍스트 필드의 길이 지정 value 텍스트 필드 부분에 표시될 내용 입력 maxlength 텍스트 필드에 입력 가능한 최대 문자 개수 지정 3. password 속성 - 비밀번호 입력란 생성 - text 속성과 달리 입력한 내용이 * 또는 · 으로 표시됨 5. 그 외의 속성값 - search : 검색 상자 생성 - url : URL 입력란 생성 - email : 메일 주소 입.. 공감수 0 댓글수 0 2022. 12. 28.
  • 폼(form) 관련 태그 폼 관련 태그 1. form 태그 - 폼을 생성함 ※ 폼(form) : 아이디와 비밀번호 또는 로그인 버튼, 회원가입 창 등 웹 사이트로 정보를 보낼 수 있는 요소들 - 폼 요소 - form 태그는 여러 속성을 통해 서버로 자료를 넘김 - method 속성 : 사용자가 입력한 내용을 서버 쪽으로 넘기는 방식을 설정함 (속성 값으로 get과 post가 존재) - get : 주소 표시줄에 사용자가 입력한 내용이 그대로 표시됨 (256byte~4096byte 까지의 데이터만 가능) - post : 사용자의 입력을 표준 입력으로 전달됨 (데이터 길의 제한을 받지 않고 입력 내용이 표시되지 않음) - name 속성 : 폼의 이름을 지정 - action 속성 : 내용을 처리해 줄 서버 상의 프로그램을 지정 - ta.. 공감수 0 댓글수 0 2022. 12. 12.
  • 미디어 쿼리 미디어 쿼리 1. 미디어 쿼리 - 웹 페이지가 표시되는 장치에 반응하도록 하여 반응형 웹을 구현할 수 있는데, 이때 사용하는 것이 미디어 쿼리임 - 미디어 쿼리는 두 가지 방법으로 사용 가능 - @media 규칙 - media 속성 2. @media 규칙을 이용해 미디어 쿼리 사용하기 Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit........... - max-width: 800px는 화면 너비가 800이 되기 전까지의 설정 (최대 너비) - min-width: 800px는 화면 너비가 800이 될 때부터의 설정 (최소 너비) 3. media 속성을 .. 공감수 0 댓글수 0 2022. 11. 2.
  • flex 관련 속성 정리 3 flex 관련 속성 정리 3 1. flex-basis 속성 - 아이템들의 기본 크기를 설정 (flex-direction이 row 일 경우 너비, column 일 경우 높이를 조절함) - 0, %, px, rem 등으로 설정 가능 ※ flex-basis에서 설정한 너비가 이미 넘은 아이템일 경우, 축소되지 않음 → 그럴 경우, word-wrap: break-word를 적용하여, 설정한 너비만큼 줄어들고 남은 텍스트는 줄바꿈됨 AAA BBB CCC .container { border: 1px solid black; width: 500px; height: 200px; display: flex; font-size: 2rem; font-weight: bold; } .container > div { margin: .. 공감수 0 댓글수 0 2022. 11. 2.
  • flex 관련 속성 정리 2 flex 관련 속성 정리 2 1. justify-content 속성 - 메인축 방향으로 아이템들을 정렬 ※ justify와 align - justify : 메인축(가로 방향)으로 정렬 - align : 수직축(세로 방향)으로 정렬 - flex-start (기본값) : 아이템들을 시작점으로 정렬 (flex-direction이 column일 경우, 위로 정렬) A B C .container { border: 1px solid black; width: 400px; height: 100px; display: flex; font-size: 2rem; font-weight: bold; justify-content: flex-start; } .container > div { width: 50px; height: 50.. 공감수 0 댓글수 0 2022. 10. 30.
  • flex 관련 속성 정리 1 flex 관련 속성 정리 1 1. display: flex 속성 - 레이아웃을 배치하는데 사용 - 속성에 따라 각각의 아이템들이 어떠한 형태로 배치되는지 설정 - display: flex를 적용하면 블록 형태로 배치된 div가 가로 방향으로 배치 red blue green /* display: flex를 적용할 경우, 세로로 배치되었던 아이템들이 가로로 배치됨 */ .container {display: flex;} .box { width: 100px; margin: 10px; font-size: 2rem; font-weight: bold; } .red {background-color: red;} .blue {background-color: blue;} .green {background-color: gre.. 공감수 0 댓글수 0 2022. 10. 27.
  • float 속성 정리 float 속성 정리 1. float 속성 - 요소를 정렬하기 위한 속성 2. float의 속성값 용어 설명 none 띄우지 않음 (기본값) left 왼쪽에 띄움 right 오른쪽에 띄움 initial 기본값으로 설정 inherit 부모 요소로부터 상속 .red { width: 100px; height: 100px; background-color: red; float: left;/* 박스를 왼쪽에 정렬함 */ } .blue { width: 100px; height: 100px; background-color: blue; float : right;/* 박스를 오른쪽에 정렬함 */ } 공감수 0 댓글수 0 2022. 10. 21.
  • 트랜지션 (Transition) 속성 정리 트랜지션 (Transition) 속성 정리 1. 트랜지션 (백과사전 바로가기) - 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것처럼 스타일 속성이 바뀌는 것 2. 트랜지션의 유형 속성 설명 transition-property 트랜지션 대상을 설정 transition-duration 트랜지션 진행 시간을 설정 transition-timing-function 트랜지션 속도 곡선을 설정 transition-delay 트랜지션 지연 시간을 설정 transtion 위 4가지의 속성을 한꺼번에 설정 3. 연습문제 .tr1 { width: 100px; height: 100px; background-color: blue; border: 1px solid black; /* 너비를 2초 동안, 높이를 .. 공감수 0 댓글수 0 2022. 10. 20.
  • 가상 요소 가상 요소 1. 가상 요소 - 내용의 일부만 선택해 스타일을 적용할 때 사용함 - 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두 개(::)를 붙임 2. ::first-line 요소와 ::first-letter 요소 - ::first-line 요소 : 첫 번째 줄에 스타일 적용 - ::first-letter 요소 : 첫 번째 글자에 스타일 적용 ※ br 태그로 글을 나눌 수 있음 걱정도 별을 둘 나는 계십니다. 나는 무덤 새워 이런 버리었습니다. p::first-line { background-color: lightseagreen; } p::first-letter { background-color: lightcoral; } 3. ::before 요소와 ::after 요소 - 내용의 앞뒤에 콘텐츠 .. 공감수 1 댓글수 0 2022. 10. 12.
  • 테이블 관련 태그 정리 테이블 관련 태그 정리 1. 표 만드는 태그 (백과사전 바로가기) - , , , 태그 : 기본적인 표를 제작 - 태그 : 표의 기본 틀을 제작 - 태그 : 행을 제작 - 태그 : 셀(열)을 제작 - 태그 : 표의 제목 셀을 제작 제목 셀 1행 2열 1핼 3열 제목 셀 2행 2열 2행 3열 2. colspan, rowspan 속성 - 행 or 열 합치기 - colspan 속성 : 가로로 합침 - rowspan 속성 : 세로로 합침 이름 연락처 주소 자기소개 3. 표에 제목 붙이기 - 태그일 경우, 제목 타이틀 소 제목 타이틀 이름 연락처 주소 자기소개 - 태그일 경우, 제목 타이틀 소제목 이름 연락처 주소 자기소개 공감수 0 댓글수 0 2022. 10. 12.
  • 주요 선택자 주요 선택자 1. 전체 선택자 - 스타일을 모든 요소에 적용할 때 사용 - * (별표)를 사용 HTML5 웹 프로그래밍 h1 {background-color: lightseagreen;} /* 마진과 패딩을 0으로 설정하여 브라우저 창에 바짝 붙게 함*/ * { margin: 0; padding: 0; } 2. 태그 선택자 - 특정 태그가 쓰인 모든 요소에 스타일을 적용 제목 타이틀 소제목 타이틀1 내용내용내용내용내용내용내용.... 소제목 타이틀2 내용내용내용내용내용내용내용.... h2 {color: blue;} /* p 선택자를 정의하면 웹 문서의 모든 p 요소들에 스타일이 적용됨 */ p { font-size: 12px; margin-left: 20px; } 3. 클래스 선택자 - 특정 부분에 스타일.. 공감수 1 댓글수 0 2022. 10. 10.
  • 주석처리 주석처리 1. HTML의 주석처리 - 로 주석처리함 2. CSS의 주석처리 - /* */ 로 주석처리함 3. Javascript의 주석처리 - // 로 주석처리함 공감수 0 댓글수 0 2022. 10. 6.
  • position 속성 정리 position 속성 정리 1. position 속성 정리 (백과사전 바로가기) - 요소의 위치 형식을 지정 - position의 종류는 4가지가 존재 - absolute - fixed - relative - static 2. absolute - 절대 위치 좌표 설정 - 문서의 흐름과 관계없이 top, right, bottom, left 속성 값을 이용해 요소를 원하는 위치에 배치 /* 박스의 크기 설정 */ .box { position: absolute; width: 100px; height: 100px; background-color: #0094ff; } /* position 설정 */ #crd1{top: 0; left: 0;} #crd2{top: 0; right: 0;} #crd3{bottom: 0.. 공감수 0 댓글수 0 2022. 10. 4.
  • 노멀라이즈 노멀라이즈 (Normalize) 1. 노멀라이즈 - HTML 요소의 기본 스타일을 브라우저 간 일관성을 유지하기 위해 적용시킴 2. a 태그의 노멀라이즈 - 기본일 때, 밑줄이 있고 색이 파랑색임 (링크로 바로가기) - 노멀라이즈 적용 시, 밑줄과 색이 바뀜 ※ inherit : 부모의 스타일을 적용 링크로 바로가기 3. body의 노멀라이즈 - 기본일 때, 약간의 margin이 들어감 Hello!!! - 노멀라이즈 적용 시, magin이 사라짐 Hello!!! 4. ul, li의 노멀라이즈 - 기본일 때, 점과 여백이 있음 메뉴 아이템 1 메뉴 아이템 2 메뉴 아이템 3 - 노멀라이즈 적용 시, 점과 여백이 사라짐 메뉴 아이템1 메뉴 아이템2 메뉴 아이템3 공감수 0 댓글수 0 2022. 9. 29.
  • 요소 가운데 정렬 요소 가운데 정렬 1. 요소 가운데 정렬 - margin: 0 auto; 라고 입력하면, 요소가 가운데로 정렬됨 공감수 0 댓글수 0 2022. 9. 26.
  • 여백을 조절하는 속성 - margin, padding 여백을 조절하는 속성 1. margin 속성 (백과사전 바로가기) - 요소 주변 여백 설정 - 한 요소와 다른 요소 사이의 간격 조절 가능 - margin-left와 margin-right의 값을 auto로 하면, 웹 요소를 중앙에 배치할 수 있음 2. 마진 중첩(margin overlap) 현상 - 요소를 세로로 배치할 경우, 마진과 마진이 만날 때, 큰 값을 기준으로 겹쳐지는 현상 ※ 가로는 겹치지 않음 - margin= 30px;로 설정할 경우, 30px+30px=60px가 아닌 30px로 설정됨 3. padding 속성 (백과사전 바로가기) - 콘텐츠 영역과 테두리 사이 여백 설정 공감수 0 댓글수 0 2022. 9. 25.
  • 박스 모델(Box Model) 박스 모델(Box Model) 1. 박스 모델(Box Model) - 박스 형태의 콘텐츠 - 박스 모델의 구조 - 실제 콘텐츠 영역 - 박스와 콘텐츠 사이의 여백인 패딩(padding) - 박스의 테두리(border) (border은 따로 정리) - 여러 박스 모델 사이의 여백인 마진(margin) 2. width, height 속성 - 콘텐츠 영역의 크기 - 너비(width), 높이(height)를 설정하여 콘텐츠 영역의 크기를 정함 - , , auto로 설정 가능 공감수 0 댓글수 0 2022. 9. 25.
  • 한칸 띄우기 한칸 띄우기 1. 한칸 띄우기 - 여러 칸을 띄우고 싶지만 html에서는 제한적임 - 그래서 를 사용 (공백을 의미) 안 녕 하 세 요 공감수 11 댓글수 0 2022. 9. 21.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.