본문 바로가기

전체 글127

[html/css] transform 변형 속성으로 육면체 만들기 transform 변형 속성transform은 변형속성으로 요소에 회전값이나 크기변환, 기울기, 이동 효과 등을 부여할 수 있는 속성이다.이러한 속성을 사용하기 위해서는 속성값에 화면좌표와 변환함수가 쓰이는데, 이에 대해 먼저 알아보겠다. 먼저 화면좌표란 브라우저 내에 존재하는 가상의 공간을 수로 표현하는 방식을 말한다.가상의 공간에는 x, y, z 축이 존재하는데, 이를 활용해 태그의 모양이나 위치를 바꿀 수 있다.공간을 구분할 때는 '2차원 화면 좌표'나 '3차원 화면 좌표'방식으로 구분해 사용한다. x축과 y축을 사용하는 변형 속성을 '2차원 화면 좌표'라고 부르고, z까지 모두 사용하는 것을 3차원 화면 좌표라고 부른다. 보통 좌상단 꼭짓점을 말하는 원점(0, 0)을 기준으로 각 축의 양수와 음수.. 2024. 7. 4.
[html/css] Vertical-align 속성으로 가로 정렬하기(수정중) Vertical-alignVertical-algin은 inline요소와 table 셀들을 가로로 정렬하는 방법을 정하는 속성이다.W3C 에서 vertical-align을 정의하는 것은 다음과 같다.+) Table-cell에 적용된 vertical-align의 경우 해당 요소가 속한 table-row 사이에서 수직 정렬을 가능하게 한다.다만 수직 정렬의 기준이 되는 기준선 등은 인라인 요소의 수직 정렬과는 조금 다르다고 하니 아래를 참고하자.+) 참고1 : vertical-align 정의 - w3c+) 참고2 : table-cell 높이의 알고리즘-w3c+) 참고블로그 : vertical-align 파헤치기 1부    자식박스에 적용시키는 스타일 속성으로 baseline, top, midde, bottom.. 2024. 6. 28.
[html/css]가상 요소를 활용해 삼각형/말풍선 만들기 가상요소로 삼각형을 만드는 방법을 알아보자.가상요소로 만든 도형은 컨텐츠를 꾸미는 용도로써 많이 사용된다. 넓이값(width/height)은 없고 border 값만 있는 박스를 이용해 삼각형을 만들 수 있다.아래 모습처럼빨간색 삼각형으로 말풍선을 만들 수 있다.가상요소로 삼각형을 만들기 전에 넓이값이 없는 상태의 border 영역의 모습을 알아야한다. 아래의 사진으로 예시 모양을 대체 하겠다.노란색 background와 핑크색 border를 가진 박스가 있다고 가정하자.만약 border의 두께가 5px로 들어가 있는 상태에서 박스의 width와 height가 0이 되면 어떤 모양이 될까?넓이가 없지만 border는 5px이라는 넓이 값이 존재하기 때문에,아래 모양과 같이 border만 남은 것을 볼 수 .. 2024. 6. 28.
[html/css] 특수문자 코드(Entity Code) 보기 좋게 정리되어있는 블로그  HTML 자주 사용 특스문자 코드표(Entity code) HTML 자주 사용 특수문자 코드표 (Entity code)Entity code 자주 사용하는 html 앤티티 코드를 정리하였습니다. 간혹 정말 필요한데 검색할려니 마땅히 무엇을 적어야 할지 몰라 당황했던적이 있습니다. 생각해보면 특수문자 또는 html code라고만aneok.tistory.com진짜 모든 코드가 다 있는 HTMl  문자코드표 HTML StandardHTMLLiving Standard — Last Updated 26 June 2024 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character .. 2024. 6. 27.
[html/css] 입력 양식 태그 입력 양식 태그입력 양식 태그는 사용자로부터 정보를 얻고자 할 때 사용하는 태그를 말한다.회원가입이나 게시글 포스팅 등 무언가를 입력해서 서버로 전송하거나 상품 주문시 내용을 작성하여 보내는 것과 같은 것들이 입력 양식에 해당한다.기본적으로 form 태그를 바탕으로 form 태그 내부에 다양한 입력 태그들을 활용해 사용한다.입력 양식 태그form입력 양식 지정을 위한 최상위 기본 태그.input여러 유형의 입력 양식을 지정하는 태그.label입력 양식과 연결되는 텍스트 라벨.fieldset입력 양식들을 그룹으로 묶어주는 태그.legendfieldset의 제목을 표시하는 태그.button입력 버튼을 생성하는 태그.select드롭 다운 박스로 목록 중에서 선택할 수 있는 양식 태그.optgroupselect.. 2024. 6. 20.
[html/css] table 태그에 적용하는 다양한 스타일 속성 border-collapsetable 태그의 border는 기본적으로 분리되어있다.  border-collapse는 분리되어있는 border를 한 줄로 합치는 속성이다.thead, tbody, tfoot에 스타일을 부여하기 위해선 border-collapse가 반드시 적용되어 있어야한다. 속성 적용은 부모태그인 table에 적용하여야한다.border-collapsecollapse 떨어져 있는 두 줄을 하나로 합쳐주는 속성.separate 기본 값. table과 td 또는 th의 줄이 나뉜다./* 기본형 */태그명{border-collapse : seperate}태그명{border-collapse : collapse}border-spacingtable 태그의 border-collapse가 separate .. 2024. 6. 20.

티스토리툴바