반응형

웹 개발을 하면서 HTML 태그 요소에 가장 많이 사용하는건, ID와 class 속성일 겁니다.

제가 알고있는 지식으로는 id는 숫자로 시작하면 안되고, 문자열로 시작해야한다로 알고 있었는데, 일반 정수형 데이터를 넣어도 잘 적용이 되고, js를 통해 제어가 가능했습니다.

 

그 예제는 아래와 같습니다.

 

HTML id속성이 정수형이면 어떻게 될까?

id값에 정수형으로 태그 생성하기

const h1 = document.createElement("h1");
h1.id = 11223344;
h1.innerText = "TEST";
document.body.append(h1);

정수형으로 id값을 생성하고 js를 통해 h1태그의 텍스트 값을 변경해보겠습니다.

생성된 태그를 확인해보면 정수형으로 생성했지만 문자열형태로 id값까지 h1태그가 잘 생성된 걸 볼 수 있습니다.

 

document.getElementById("11223344").innerText = "변경";

숫자로 시작하는 id값을 호출하여 text값을 변경해도 문제없이 동작합니다.

 

숫자 ID값에 css적용하기?

<style>
  #11223344{color: yellowgreen}
</style>

다만 style태그에 정의한 css는 동작하지 않습니다.

 

 

 

HTML - id란? 특징

HTML - ID속성

ID는 document 전체에서 유일한 고유식별자로 유일해야합니다.

요소를 구분하고 스타일(css), 스크립트(js)에서 특정 요소를 식별하고 제어하기 위해 주로 사용됩니다.

 

ID의 특징

- 요소마다 한개의 ID만 가질 수 있습니다. 

- 공백(스페이스, 탭)의 값을 포함하면 안됩니다. 혹시 공백을 넣게되면 공백까지 ID로 취급됩니다.

- 대소문자를 구분합니다.

 

 

 

HTML버전별 ID 동작 차이

HTML4

id는 A-Z, a-z로 시작해야하며, 이후 문자, 숫자, '-', '_', '.'이 올 수 있습니다.

 

HTML5

HTML5로 올라오면서 공백을 제외하고 대부분의 값을 받아들입니다.

숫자로만 구성되거나, 밑줄로 시작하거나 점만으로 구성되어도 가능합니다.

 

4, 5는 이러한 차이점이 발생하고 있는데, 5로 올라오면서 허용된 대부분의 값이 문제가 되고 있습니다.

특히나 css에서 .과 :는 선택자로서 특별한 의미를 지니는데, id값에 .과 :가 있게되면 css측에서는 혼돈이 발생됩니다.

 

 

"."이 있는 id값에 css적용하기

<style>
  #abc.def{color: yellowgreen} //abc라는 id를 가지면서 def라는 클래스를 가진 요소에 적용
  #abc\.def{color: yellowgreen} //\역슬래쉬를 통해 처리
</style>

<h1 id="abc.def">TEST</h1>

안그래도 복잡한 구조에 역슬래쉬까지 추가해서 제어를 해야합니다.

저라면 정말 어쩔수 없는 특별한 상황이 아니라면 사용하고 싶지 않군요.

 

다른 스택오버플로우나 블로그 글들에서도 볼 수 있듯 숫자로 시작하는 id값 생성과 제어는 js까진 사용 가능하지만

html4처럼 기존의 양식을 지키는 형태로 작성하며, 문자[A-Za-z]로 시작하고, ':', '.'와 같은 특수문자보단 '-', '_'를 사용하거나 카멜표기법을 따르는것을 권장합니다.

 

 

 

 

자료출처: https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html

자료출처: https://www.w3.org/TR/CSS21/syndata.html#characters

 

반응형
반응형

form태그 내부에 input태그가 단일로 존재하면 엔터 입력시 submit동작이 이루어지는걸 알고 계셨나요?

 

input, button태그 하나씩 구성된 form태그를 만들고 이벤트를 작성중이였습니다.

button태그 타입도 submit이 아닌 button으로 지정하였고, js에 key event도 작성하지 않았는데, input에 글을 입력하고 엔터키를 누르면 자동으로 submit동작이 발생하였습니다.(저는 ajax를 통해 데이터를 처리하고 싶었습니다!)

 

다음은 문제가 발생한 코드 예제입니다.

<form name="agencyAddForm" action="" autocomplete="off">
    <div class="form-group m-t-10">
        <label class="control-label col-md-2 col-sm-2 col-xs-2">회사명</label>
        <div class="col-md-8 col-sm-8 col-xs-8">
            <input type="text" id="agencySearchName" class="form-control">
        </div>
        <div class="col-md-2 col-sm-2 col-xs-2">
            <button type="button" id="agencySearchBtn" class="btn btn-success btn-sm">찾기</button>
        </div>
    </div>
</form>

(부트스트랩을 사용하였기에 class가 많습니다.)

다른 내용은 볼 필요가 없고 form태그 내부를 보시면 input태그는 단일 한개가 존재하고 있습니다.

form내부에 input태그가 한개만 존재하면 자동으로 submit동작이 발생한다고 합니다.

 

해결방법

- onsubmit="return false;" 속성 추가하기

<form name="agencyAddForm" action="" autocomplete="off" onsubmit="return false;">
	...
</form>

이를 방지하기 위해 form태그 내부에 onsubmit이벤트를 추가하였습니다.

 

그외 방법으로 불필요한 input text태그를 숨기거나, hidden태그등을 넣어도 되지만, submit동작을 사용하진 않을거라 막아두었습니다.

 

 

ps. 신입때도 form태그 내부에 button태그에 type을 지정을 안하고 기본 동작인 submit동작이 되어서 고생했던 기억이 있는데, 역시 기초가 중요한것 같습니다!!!

1. form태그에 input이 하나만 있으면 엔터입력시 자동으로 submit이 동작한다.

2. form태그에 button이 있고 type지정을 안하면 submit이 동작한다.

 

2가지만 기억하시면 시간낭비가 줄어드실거 같습니다😙

반응형
반응형

Table 태그를 구성하다보면 데이터가 길어질 경우를 대비해서 스크롤을 내리더라도 헤더컬럼부분을 고정으로 주고

아래 데이터부분만 스크롤이 되도록 처리하는 경우가 있습니다.

헤더가 고정된 테이블

 

"<table>" 태그를 "<thead>"와 "<tbody>" 형태로 구성하시고 "<thead> <th>"에는 position: sticky를 처리하면 고정형 테이블을 구성할 수 있습니다.

 

다만, sticky의 경우 IE에서 지원이 안되기때문에 static으로 동작하여 일반적인 테이블처럼 동작하게 됩니다.

아래는 sticky를 사용하여 고정헤더 테이블 샘플 예제 소스입니다.

 

헤더 고정하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <style>
        *{margin:0; padding:0;}
        html, body, .wrapper{width:100%; height: 100vh;}
        .wrapper .tableBox{position: relative; top: 50px; left: 50px; width: 700px; height: 100px; overflow-y: scroll; border-top: 2px solid dodgerblue;}
        .tableData{width: 100%; border-collapse: collapse; text-align: center;}
        .tableData thead tr th{position: sticky; top: 0; background: #ebeaea;}
        .tableData thead tr th,
        .tableData tbody tr td{padding: 15px 0; box-sizing: border-box; border-bottom: 1px solid #dedede; border-right: 1px solid #ddd; word-break: break-all;}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="tableBox">
            <table class="tableData">
                <colgroup>
                    <col width="8%">
                    <col width="15%">
                    <col width="25%">
                    <col width="16%">
                    <col width="12%">
                    <col width="12%">
                    <col width="12%">
                </colgroup>
                <thead>
                    <tr>
                        <th class="stiky">순번</th>
                        <th class="stiky">구분</th>
                        <th class="stiky">제목</th>
                        <th class="stiky">글쓴이</th>
                        <th class="stiky">날짜</th>
                        <th class="stiky">첨부파일</th>
                        <th class="stiky">비고</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>공지사항</td>
                        <td>제목입니다.</td>
                        <td>홍길동</td>
                        <td>2020-11-26</td>
                        <td>-</td>
                        <td>-</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>공지사항</td>
                        <td>제목 "1","2","3","4","5","6","7","8","9","10","11"</td>
                        <td>홍길동</td>
                        <td>2020-11-26</td>
                        <td>-</td>
                        <td>-</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>게시판</td>
                        <td>123456789123456789123456789</td>
                        <td>홍길동</td>
                        <td>2020-11-26</td>
                        <td>-</td>
                        <td>-</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

thead 태그의 th들에게 position:sticky를 처리하여 고정시킨 예제입니다.

주의점으로 theadthead tr에 sticky를 줘도 동작하지 않기에 꼭 thead영역의 th들에게 sticky처리를 하셔야 합니다.

 

 

myhappyman.tistory.com/185

 

HTML - Table td안에 특수문자(")가 존재할 경우 넓이 초과 현상

DB데이터를 가져와서 테이블에 데이터를 만들어 append를 처리하고 있었는데, 데이터 문자열 내부에 "(더블 쿼드)가 포함된 긴 문자열이 들어가 있었고, 정상적인 넓이로 table이 동작하지 않았다. '

myhappyman.tistory.com

이전 글인 table을 두개로 넓이를 동일하게 처리하여 구성한 테이블에서 발생할 수 있는 현상도 방지할 수 있고, 깔끔하게 동작이 됩니다!

 

IE를 신경쓰지 않아도 되는 프로젝트에서는 유용하게 사용할 수 있겠습니다.

반응형
  1. 익명 2020.11.29 16:21

    비밀댓글입니다

    • 익명 2020.11.30 09:12

      비밀댓글입니다

반응형

DB데이터를 가져와서 테이블에 데이터를 만들어 append를 처리하고 있었는데, 데이터 문자열 내부에 "(더블 쿼드)가 포함된 긴 문자열이 들어가 있었고, 정상적인 넓이로 table이 동작하지 않았다.

 

'<colgroup>' 태그로 width를 주고 css로 width : 넓이값% !important까지 처리하였지만 여전히 먹통이였다.

word-break: break-all 속성을 추가하여도 문제가 발생하였는데,

원인은 특수문자 "(더블 쿼드)가  존재하면서 발생하는 문제였고, 파싱하는 과정에서 replace메소드로 치환하여 처리하니 문제없이 동작하였다.

 

아래는 비슷한 현상을 재현하기 위한 sample 소스이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <style>
        *{margin:0; padding:0;}
        html, body, .wrapper{width:100%; height: 100vh;}
        .wrapper .tableBox{position: relative; top: 50px; left:50px; width: 700px;}
        .wrapper .tableBox .scroll{width: 100%; height: 100px; overflow-y: scroll;}
        table{border-collapse:collapse;text-align: center;}
        table th{border-top: 2px solid dodgerblue; position: sticky; top: 0px;}
        table th, table td{border-bottom: 1px solid #dedede;border-right: 1px solid #ddd;word-break: break-all;}
        .tableHeader{width: calc(100% - 17px);}
        .tableHeader th{height: 40px;}
        .tableData{width: 100%;}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="tableBox">
            <table class="tableHeader">
                <colgroup>
                    <col width="8%">
                    <col width="15%">
                    <col width="25%">
                    <col width="16%">
                    <col width="12%">
                    <col width="12%">
                    <col width="12%">
                </colgroup>
                <thead>
                    <tr>
                        <th>순번</th>
                        <th>구분</th>
                        <th>제목</th>
                        <th>글쓴이</th>
                        <th>날짜</th>
                        <th>첨부파일</th>
                        <th>비고</th>
                    </tr>
                </thead>
            </table>
            <div class="scroll">
                <table class="tableData">
                    <colgroup>
                        <col width="8%">
                        <col width="15%">
                        <col width="25%">
                        <col width="16%">
                        <col width="12%">
                        <col width="12%">
                        <col width="12%">
                    </colgroup>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>공지사항</td>
                            <td>제목입니다.</td>
                            <td>홍길동</td>
                            <td>2020-11-26</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>공지사항</td>
                            <td>제목 "1","2","3","4","5","6","7","8","9","10","11"</td>
                            <td>홍길동</td>
                            <td>2020-11-26</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>게시판</td>
                            <td>123456789123456789123456789</td>
                            <td>홍길동</td>
                            <td>2020-11-26</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

테이블 컬럼을 고정화 시키기 위해 table 태그를 2개로 구성하였다.

 

이후 로드된 페이지는 아래와 같다.

제목 컬럼의 내용이 특수문자가 추가되면서 주르륵 붙으면서 발생하는 현상이다.

 

더블쿼드가 붙으면 문제가 발생한다.

 

 

다음은 더블쿼드를 삭제하였을때 정상적으로 동작하는 것을 볼 수 있다.

 

더블쿼드를 지우니 깨지지 않는다.

 

 

반응형
반응형

입력폼에 컨텐츠에 해당하는 내용을 적도록 할때 textarea 또는 에디터 툴을 적용하여 장문을 지원하는데, 이때 사용자가 엔터와 같은 개행문자를 입력하지 않고, 연속되게 이어서 입력하게되면 나중에 데이터를 받아와서 parsing시 그냥 한줄로 쭉 들어와서 정상적으로 노출되지 않는 현상이 존재한다.

 

이 때, CSS의 word-wrap옵션을 통해 처리가 가능하다.

 

 

word-wrap

word-wrap:break-word;

 

적용전 문제가 되는 모습

개행이 없다보니 그대로 넣게되면 깨지는 현상을 볼 수 있다.

 

word-wrap: break-word;적용

.contents p {word-wrap: break-word;}

적용 후에는 넓이값에 도달하면 알아서 줄바꿈이 일어난다.

 

normal 옵션도 존재하는데, 이 경우에는 기존처럼 문자열이 뚫고 나온다.

반응형
반응형

position값을 사용하여 처리하면 center같은 옵션이 먹지 않는데, 이런 경우에는 약간의 연산이나 transform옵션을 활용하면 중앙 정렬 또는 가운데 정렬등을 처리 할 수 있습니다.

transform을 통한 센터정렬, 중앙정렬하기

 

HTML - 예시 데이터

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centered</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    .popup {
        width: 300px;
        height: 450px;
        border: 1px solid gray;
        background-color: aquamarine;
        position: absolute;
        top: 0%;
        left: 0%;
    }
</style>

<body>
    <div class="popup"></div>
</body>

</html>

 

샘플

이러한 형태의 div를 중앙 정렬을 또는 가운데 정렬을 처리해보겠습니다.

 

 

1. top, left에 50%씩 처리하여 가운데로 밀어넣기

.popup 클래스에 top, left를 50퍼로 수정합니다.

.popup {
    width: 300px;
    height: 450px;
    border: 1px solid gray;
    background-color: aquamarine;
    position: absolute;
    top: 50%;
    left: 50%;
}

 

전체의 가운데 위치 기준으로 생성되었다.

중앙을 기준으로 가로 300px, 높이 450px짜리 div가 처리된것을 볼 수 있습니다.

이부분에서 transform을 추가하여 완벽한 중앙 정렬을 처리합니다.

 

2. transform으로 요소 사이즈만큼 반대로 이동시키기

.popup {
    width: 300px;
    height: 450px;
    border: 1px solid gray;
    background-color: aquamarine;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

중앙 정렬!

 

원리는 아래와 같습니다.

개체의 넓이와 높이만큼 50퍼센트를 반대로 이동합니다.

 

 

가운데 정렬

높이는 30px만큼 고정으로 띄우고 가운데만 정렬하고자 할때는 아래와 같이합니다.

.popup {
    width: 300px;
    height: 450px;
    border: 1px solid gray;
    background-color: aquamarine;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0%);
}

 

높이는 고정 시키고 가운데 정렬

 

 

translate의 첫번째 x축인 가로축만 50퍼센트만큼 당겨와서 가운데 정렬을 처리할 수 있습니다.

반응형
  1. 지나가는 사람 2021.11.19 09:37

    좋은 글 감사합니다.
    취미로 컴터하는 초보자라 개발하는 데에 막히는 부분이 많은데
    이 글이 큰 도움이 되었습니다.

  2. 이분 정말 최고.. 2021.11.30 11:20

    정말정말정말정말 감사합니다. 제가 진짜 몇일동안 찾던 정보였는데... ㅜㅜㅜㅜㅜㅜ 이렇게 깔끔하게 정리해주셔서 너무 감사합니다!!!

반응형

checkbox는 자주사용하는 html tag이지만 브라우저별로 약간의 사이즈 차이와 이미지가 차이가 있다보니 css를 통해 통일화를 시키고 싶지만 CSS를 통해 checkbox를 꾸미는것은 불가능하기 때문에 이미지로 대체하여 동작시키는 경우가 많다.

 

label태그를 사용하면 checkbox를 꾸밀 수 있는데 코드는 아래와 같다.

 

checkbox.html

<input type="checkbox" id="myCheck">
<label for="myCheck"></label>

id를 지정해주고 label태그는 바라볼 checkbox와 연결해준다.

 

 

css

input[type="checkbox"]+label {
    display: block;
    width: 24px;
    height: 24px;
    background: url('./images/check-off.png') no-repeat 0 0px / contain;
}

input[type='checkbox']:checked+label {
    background: url('./images/check-on.png') no-repeat 0 1px / contain;
}

input[type="checkbox"] {
    display: none;
}

+를 통해 바로 뒤에 오는 label태그를 같이 선택시킨다.

그런 다음 기본이미지("체크되지 않은 이미지")를 배경으로 처리하고 :checked속성을 추가하여 선택된 이미지("체크 이미지")를 넣는다.

 

마지막에 원래 이미지인 checkbox는 숨긴다.

 

동작정보

이미지로 대체된 기본 체크박스

변경된 체크박스

반응형
  1. 2022.01.26 01:04

    label과 input을 따로 써줘야하나요?
    label이 input의 부모가 될 순 없나요?

    • Favicon of https://myhappyman.tistory.com Park.S.W 2022.01.26 09:02 신고

      안녕하세요~ label 태그에 대한 설명이 필요할 것 같습니다. MDN문서를 한번 확인해보시면 좋을거 같습니다!

      url : https://developer.mozilla.org/ko/docs/Web/HTML/Element/label

반응형

HTML 페이지에서 반응형 작업을 한 후 모바일에서 테스트를 하는도중 input text속성 태그를 모바일환경에서

선택하게 되면 키 자판이 일반 입력 배열이 아닌 숫자자판이 나오게 하고 싶었다.

이러한 경우엔 type 값을 tel 속성으로 지정해주면 모바일환경에서 숫자자판이 먼저 나오는 걸 볼 수 있다.

 

<input type="tel" value="">

 

https://www.w3schools.com/tags/att_input_type_tel.asp

 

HTML input type="tel"

HTML ❮ HTML type attribute Example Define a field for entering a telephone number: Telephone:

Try it Yourself » Definition and Usage The

defines a field for entering a telephone number. Note: Browsers tha

www.w3schools.com

 

같이 사용할만한 자바스크립트 입력제한 방법이다.

html

<input type="tel" value="" telOnly="true">

 

javascript

//input tel telOnly 속성이 있으면 숫자, '-'만 입력받기
$(document).on("keyup", "input[telOnly]", function() {$(this).val( $(this).val().replace(/[^0-9-]/gi,"") );});

 

자바스크립트 keyup 이벤트를 통해 입력된 데이터를 replace 함수를 통해 변경한다.

해당 자바스크립트를 설정하면 숫자 및 '-'만 입력이 가능하다.

반응형