flex는 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하기 위해 사용한다. 컨테이너에 사용할 수 있는 속성은 flex-direction, justify-content, align-items가 있으며 flex-item에 사용할 수 있는 속성은 flex-grow, flex-shrink,flex-basis가 있다. flex-item에 부여할 수 있는 속성은 축약형으로 사용할 수 있는데, 다음과 같다. A B C #flex-container { display: flex; border:1px solid black; padding:10px; width: 500px; height: 100px; flex-direction: row; justify-content: space-between;..

1. PC HTML 선택 이름 홍길동 나이 20세 출생지 서울 상세보기 보기 CSS table.type3 { border-spacing: 0; border-collapse: collapse; width: 100%; margin-bottom: 40px; } table.type3 tr { border: 1px solid #000; } table.type3 th, table.type3 td { text-align: center; padding: 5px 0px; } table.type3 th { background: #000; color: #fff; } 2. Moblie @media (max-width:600px) { table.type3 colgroup { display: none; } table.type3 ..

간단한 툴팁 HTML

회사 업무 중 iframe의 사용법이 쉽지는 않았기도 하고 외부 페이지가 가진 자체적인 이슈도 있어 반응형 대응을 하기에 난이도가 좀 있었기 때문에 문제 해결 과정을 다시 한번 정리해보고자 한다. 최선의 방법은 아니었지만 직면했던 상황에서 최대한 할 수 있는 대처를 했으며 공부가 많이 되었다. 크리티컬한 이슈는 아래 세 가지였다. 1) 영역 삽입했을 시 상단부 이미지에만 테두리 생기는 현상이 있었음 문제 원인 : 외부 url을 iframe에 노출시켰을 시 상단 이미지 2개가 일정 width를 넘어가면 (694px 추정ㅠㅠ) 여백이 생겼다.모든 이미지가 동일한 상태면 처리가 쉬웠을 것 같은데 url 페이지 하단 삽입 이미지들은 또 반응형이 되어있고...... 해결 방법 : d a. iframe 프로퍼티로 ..

html을 빨리 작성/수정하는 것으로 생산성을 증가시킬 수 있다! 아래 단축키 입력하고 + Enter 키 누를 시 코드가 빠르게 작성된다. 1. div.클래스명 혹은 .클래스명 2. div#아이디명 3. div>ul>li : div 태그 안의 ul 태그 안의 li 태그 작성 4. div>ul+ol : div 태그를 부모로 ul, ol이 형제 관계로 들어감 5. div>(header>ul>li*2>a)+footer>p 6. p{hello} : p태그 안에 { }안의 문자 삽입 hello 7. p.class${item $}*5 item 1 item 2 item 3 item 4 item 5 8. p>lorem : p 태그 안에 lorem lipsum의 전체 문구 삽입 Lorem ipsum dolor sit a..

도큐먼트가 뷰포트의 width 100%를 차지하지 않는 현상.. 1차, 2차 프로젝트 개발에서 모두 이 현상을 겪었다. = 작업 환경 설정 시 필수 셋팅이 필요한 사항 해결 방법은 아래와 같다. 1. 헤더 안에 메타 태그를 작성한다. 2. html, body 태그에 max-width:100%, overflow-x:hidden 속성을 준다. html, body { max-width:100%; overflow-x:hidden; }