웹(web)/프론트엔드-html8 HTML Table 다음과 같은 형태의 표를 만들고 싶다면 어떻게 해야할까? 태그를 사용하면 된다. table에서 자식 태그로 tr을 쓰면 row가 생성된다. tr의 자식태그로 td를 쓰면 cell 하나씩 만들 수 있다. 위 예제를 만드는 코드는 다음과 같다. css 설명 외측 테두리 선을 위해서 table{border: 1px solid black} table{ padding: 10px} 는 효과가 없음. (border-collapse: collapse 때문에 ) 기본 table이 생성되면 기본 생성되는 모양을 보면 엑셀의 표 형태가 아니다. 이를 위해서 table{border-collapse: collapse} 설정 테두리 내부 선을 위해서 td{border:1px solid} 셀 내부 여백을 위해 td{padding:.. 2020. 5. 13. html <img> vs css {background-image}(img태그와 백그라운드 이미지 비교) 두 가지 방법을 활용하여 이미지를 원하는 위치에 구성하면 결과적으로 똑같은 효과를 얻어낼 수 있다. 그러면 둘을 결정하는 기준은 무엇일까? 답은 html과 css의 기본에 있다. html 태그들은 웹 페이지를 구성하는 작은 부분들이다. 따라서, 사용할 이미지가 컨텐츠로 의미를 갖는다면 img태그를 사용하면 된다. 그것이 아니라 디자인적인 필요에 의해 background-image로 사용하면 될 것이다. 프론트엔드 개발 중에 위와 같은 대체 기능이 보이고 고르는 것이 헷갈릴 수 있다. html은 컨텐츠를 구성하는 부분이고 css는 디자인적인 요소임을 인지하면 쉽게 구분해서 사용할 수 있을 것이다. 2020. 5. 5. HTML5 tag catecory(html5 태그 분류) HTML5의 태그 개수가 50개도 넘다 보니 다 외우는 것이 어렵다. 따라서 기능적인 관점에서 태그를 분류하고 이 분류를 기억하는 것이 기억에 용이할 것이다. 우선 익숙해질 때까지 태그가 어떤 카테고리에 들어갔는지 계속 보다보면 효율적일 것이다. 1. 레이아웃 관련 태그 = 웹사이트의 화면에 컨텐츠를 넣기 위해선 레이아웃을 정하는 것이 선행된다. 상단 메뉴바, 중간 컨텐츠영역, 하단부와 같이 레이아웃을 결정하는 것이 선행되어야 한다. 다른 블로그나 책에서 섹션 태그라고 하면서 여러 태그를 언급하는데 내 생각에는 div면 충분한 것 같다. 왜냐면 각 div 별로 class를 header, main, footer로 나누는 것이 header, section, footer를 쓰는 것과 의미적으로 똑같기 때문이다.. 2020. 5. 1. html guide line(가이드 라인) 현재 html5가 웹 표준이며 웹 접근성을 가져야 한다. 여기서 웹 표준은 구조, 표현, 동작이 원하는 바와 같게 동작하도록 정해둔 규칙이라고 볼 수 있다. 웹 접근성은 웹을 사용하는 사람이 누구인지 상관없이 제공하는 컨텐츠를 수용할 수 있는 성질이다. 즉, 시각장애우 같은 경우 웹을 음성으로 읽어주는 프로그램을 이용하는데 이 경우에도 컨텐츠를 원활하게 제공되도록 웹사이트를 제작해야된다. 2020. 4. 28. 이전 1 2 다음
