분류 전체보기96 [CSS] float 속성 레이아웃 문제 / 부모 요소 크기 미반영 자식요소에서 float 사용 시 부모 요소가 자식 요소의 크기 미반영 파랑 초록 float를 사용하게 되면 문서의 흐름에서 제외되어 붕 떠있는 상태가 되기 때문에 부모가 자식요소 크기 인식 불가 해결법 1. 뒤에 요소를 추가하여 clear:both 처리 한다. 파랑 초록 필요없는 div를 만들어야 해서 불편할 수 있음 2. ::after + clear:both .gray::after { content: ''; display: block; clear: both; } 자동으로 추가되어 제거해주니 깔끔 3. overflow:hidden .gray { overflow: hidden; } 자식요소 크기는 인식하는데 hidden이라 다양한 제약사항이 생겨서 2번을 추천함 해결 완료 2022. 10. 18. [HTML] 알면 좋은것들 이미지 비율 이미지의 width나 height 중 하나만 수정하면 이미지 비율을 유지하며 크기를 조정한다. 만약 둘 다 수정해 버리면 비율을 무시하게 된다. a 태그 이동 a태그는 원하는 웹페이지로 이동할 수 있고 id로도 이동할 수 있다. 두개 합쳐서 원하는 웹페이지의 id로도 이동이 가능하다. label과 input 연결 label태그의 for속성에 input태그의 id를 입력하면 label과 input이 연결되어 label만 클릭해도 input이 되도록 해준다. 라벨 textarea 공백 로 사용하게 되면 여는태그와 닫는 태그 사이에 줄바꿈(공백) 이 들어가게 되어 원하는대로 동작하지 않을 수 있다. colgroup colgroup을 이용하여 table의 column을 그룹지어 관리할 수 있다. 이.. 2022. 10. 18. [HTML] 메인 페이지 index.html의 이해 웹 페이지의 기본값 index.html은 웹 페이지의 메인 화면이다. 사이트를 요청할 때 다른 페이지가 지정되지 않은 경우 웹 사이트에 표시된 기본 페이지에 해당되는 가장 일반적인 이름 index.html은 산업 전반의 표준 필요 이유 웹사이트는 웹서버 디렉토리에 구축됨 보통 웹사이트 방문 시 url 주소만 치고 들어옴 특정한 페이지를 요구하지 않았기 때문에 어떤 페이지를 보여줄지 모르는 문제 발생 이를 해결하기 위해 특정 이름의 페이지를 기본 페이지로 사용 사용자는 특정 페이지를 요구하지 않았기 때문에 기본 페이지로 이동함 이 기본 페이지에 사용되는 이름이 index.html임 예외 사항 index.html 외에도 일부 사이트에선 default.html homt.html 등도 사용함 장점 : 모든 디렉.. 2022. 10. 17. [HTML] 시맨틱 태그 시맨틱 태그 의미가 있는 태그 의미가 없는 태그는 이름만 보고 무슨 내용, 역할인지 유추 할 수 없다. 의미가 있다면 태그만 보고도 브라우저, 개발자가 내용, 역할을 유추 가능하다. 장점 검색엔진 최적화(SEO) 검색엔진은 봇을 이용해 웹사이트 정보를 수집하고 검색할만한 키워드를 예상하여 인덱스를 만든다. 이러한 인덱스 생성에 사용되는 정보는 HTML코드, 그 중 시맨틱 태그들을 해석해서 구성합니다. 시맨틱 태그를 잘 썻다면 검색엔진이 의도한대로 잘 동작함 가독성 향상 코드를 보고 어느 부분이 어떤 역할을 하는지 한 눈에 파악이 가능 여러 사람이 작업할 때 따로 설명을 하지 않아도 파악이 가능 유지보수에 도움 strong em mark sub sup header nav section article asi.. 2022. 10. 17. [Algorithm] 유클리드 알고리즘 (GCD) 유클리드 알고리즘 - 주어진 두 수 사이에 존재하는 최대 공약수 (GCD) 구하는 알고리즘 - 자세한건 유클리드 호제법 참고 - gcd ( a, b ) == gcd ( b, r ) 이다. (a,b 자연수 / r은 a를b로 나눈 나머지) 원리 자연수 a, b가 주어짐 이때 a가 b보다 큰 값임 int a = 자연수 int b = 자연수 a 를 b로 나눈 나머지가 r 이면 int r; r = a % b; r이 0이면 b가 최대 공약수(gcd) 이다. if (r == 0) return b; 만약 r이 0이 아니면, a에 b값 넣고, b에 r값 넣고, 다시 두번째 부터 반복하면 된다. while(1){ int r = a % b; if( r == 0 ) return b; a = b; b = r; } 공식 int .. 2022. 10. 17. [VS Code] Emmet / HTML Emmet HTML, CSS 작성 시간 단축시켜주는 확장 기능이다. 적용 환경설정에서 Emmet: Trigger Expansion On Tab 체크하면 편하게 사용 가능 1. HTML 표준 DTD 문서 " ! " ! 2. 자식 노드 " > " ul > li 3. 형제 노드 " + " ui > li + div 4. 반복하기 " * " ul > li * 3 5. 그룹화 " ( ) " div > (header > ul > li *3 > a) + footer - div 자식으로 header와 footer 존재, header 자식 ul 자식 li 자식*3의 자식 a 6. 클래스 부여 " . " p.testclass 7. 아이디 부여 " # " p#testId 8. 텍스트 / 콘텐츠 입력 " { } " p.test.. 2022. 10. 17. 이전 1 ··· 11 12 13 14 15 16 다음
