반응형으로 잘 처리해두고 깨지지 않는 것도 확인했는데, 특정 IPhone기종에서 몇몇 부분들만 뜬금없이 폰트가 커지게 되어서 UI가 깨지는 형상이 발견되었다.

(chrome, 안드로이드는 모두 괜찮았다...!)

body태그에 아래와 같이 한 줄을 추가하여 해결!

body {
    /* iphone 갑자기 폰트 크게 터지는 현상 방지용 */
    -webkit-text-size-adjust: 100%;
  }

a태그에 View라는 텍스트가 들어간 동그란 버튼을 만들고 싶었다.

그 버튼 안에는 Hover 이벤트가 발생하면 파도가 차오르는 효과의 애니메이트 효과를 적용하였다.

이렇게 작성하면서 발생한 문제로 ::before 가상요소에 동그란 이미지가 빙글빙글 돌면서 파도현상으로 보이게 처리한건데 올라오면서 View라는 글씨가 덮어쓰여지게 되면서 보이지 않는 이슈가 발생하였다.

위 이미지처럼 백그라운드 요소가 올라오면서 가려지는 현상이였다.

이런 경우엔 z-index로 기존 요소를 높게주고, 가상요소인 before에 값을 처리한다고 하더라도 변화가 없다.

z-index는 같은 선상에 존재하는 요소들끼리의 보여주는 순서이기 때문이다.

이런 경우 같은 선상에 있는 after 가상요소를 추가하여 텍스트를 추가하여 처리하면 된다.

결과 소스

.goLink {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 4rem;
    right: 3rem;
    width: 6rem;
    height: 6rem;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    overflow: hidden;
    transition: 0.5s;
    background-color: transparent;
}
.goLink:hover {
    border: 2px solid rgba(114, 196, 226, 0.6);
}
.goLink:hover::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translate(-50%);
    width: 32rem;
    height: 32rem;
    border-radius: 13rem;
    background-color: rgba(114, 196, 226, 1);
    animation: wave 4s infinite linear;
}
.goLink:hover::after {
	color: #fff;
}
.goLink::after {
    content: "View";
    bottom: 4rem;
    right: 3rem;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    z-index: 9;
}

웹 개발을 하면서 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를 처리하여 고정시킨 예제입니다.

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

myhappyman.tistory.com/185

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

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

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 옵션도 존재하는데, 이 경우에는 기존처럼 문자열이 뚫고 나온다.