'FRONT-END' 카테고리의 글 목록

css 예제 + position 4가지

FRONT-END 2023. 8. 23. 23:10

CSS 기본

FRONT-END 2023. 4. 8. 21:21

CSS specicificity: 인라인 style1순위, ID 2순위, class 3순위, 요소 4순위 => 1,0,0,0 혹은 1000 형태로 표현됨. 0010 은 class임.

=> p { color:red;] .p1 { color:green; } 이면 p는 0.0.0.2 이고 .p1은 0.0.1.0 이라서 .p1이 힘이 우선 적용된다...

(p가 0.0.0.1이 아니고 0.0.0.2인 이유는 아직 잘 모르겠음) => 암기: Inline + ICA(id,class, attribute)

CSS Selectors:

Universal Selector: * { padding: 10px; }
Element Type Selector: ul {border: solid 1px #ccc;}
ID selector: #myContainer { width: 90px; margin: 0 auto; } => <div id="myClass"/>
Class selector: .box {width: 20px;} => <div class="box">
Descendant 결합: #container .box{ float:left; } => <div id="container"> <div class = "box"> HI </div> </div>
1단계 Child만 결합: #container> .box{ float:left; } 위예제는 모든 자손들 box 다 포함이지만, > 사용시 딱 1단계 child만 적용
동일레벨(sibiling) 결합: h2 ~ p {font-weight: bold;} => <h2> A </h2> <p> B </p> 도 굵게 됨.
#container ~ .box 라고 동일 레벨선상의 두 요소에 전체적으로 적용이 됨.
요소(attribute) selector: input [type="text"] {background-color:#fff;} => <input type="text"> 에 적용됨.

Internal Style Sheet VS. External : (external: <link rel="stylesheet" href="blabla.css"> )

html 안에서 직접 CSS사용하고 싶으면 <style> </style> 테그만 있으면 된다.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: lightblue;
    }
    h1 {
      color: white;
      text-align: center;
    }
    p {
      font-size: 18px;
      color: darkblue;
    }
  </style>
</head>

저작자표시

Posted by yongary

,

front-end 기본상식들

FRONT-END 2023. 3. 20. 20:44

75가지 질문들 : REF

- clickJacking:

ClickJacking is an attack which lets the developer fool the users into thinking that they are clicking one thing but actually they are clicking the other one.

- Coercion : javascript 타입변환으로 자동변환과 강제변환(explict coercion)이 있다. explict 예:) Number('1')

- IIFE : 즉시 실행함수, 아래와 같이 정의즉시 실행됨.

(function(a, b) { return a + b })(1, 2) // 3

- srcset: @media css태그와 유사하게 html img 태그안에서, responsive한 image들 지정.

<img
  srcset="images/heropy_small.png 400w,
          images/heropy_medium.png 700w,
          images/heropy_large.png 1000w"
  src="images/heropy.png" />

- Mixin : A Mixin is a code block that lets the group of CSS declarations which we can reuse in our site.

@mixin set-color {
  color: #fff;
  background-color: yellow;
}
 
h1 {
  @include set-color
}

- CSP : Content-Security-Policy : 웹 취약점 중 하나인 XSS등의 공격을 방지하기 위한 보안정책입니다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'none'">
;로 구분을 주어 사용하면 됩니다.

self : 현재도메인의 리소스만 만 사용하겠다는 뜻.
script-src 'none' : 모든 스크립트는 허용암함.

저작자표시

Posted by yongary

,

jQuery, Form-validation

FRONT-END 2017. 8. 2. 16:49

Form의 Validation을 체크할 때, 주로 spring의 validator기능을 사용해 왔지만,

jQuery에서도 Form-validation기능이 있다는 걸 알게되었다.

잘만 쓴다면, 서버까지 갔다오지 않고 바로 javascript에서 처리가 되니 장점이 존재한다.

REF

기본적으로는 rules: 와 messages:를 정해주면 자동으로 체크 및 에러메시지가 출력된다.

예)

$("#basicForm").validate({
  rules: {
     validForCheck : 'validForCheck',
     rankingWeightCheck: 'rankingWeightCheck'
  }
  messages:  또는 메시지를 아래 addMethod에 적을 수 있음.

});

$.validator.addMethod("rankingWeightCheck", function(value) {

   return ($('#className').val() < 100 );

}, 'Please enter a Value under 100<br>');

저작자표시

Posted by yongary

,

jQuery AutoComplete을 이용한 suggestion Box + themeleaf

FRONT-END 2017. 5. 25. 17:32

jQueryAutoComplete API Doc

suggestion (구글 검색창 처럼, 한 글자를 입력하면 자동으로 추천해주는 기능)

을 구현하기 위해서는 text box와 그 밑에 div를 이용해서 복잡하게 하는게 좋긴 한데

jQuery의 AutoComplete라는 기능을 이용해서 간단하게 할 수 있다. REF (value만 있는 autoComplete)

label, value가 있는 autocomplete 예제는 여기: REF - 별로 이쁘지 않고, 키로 값이 선택되지도 않음

약간 발전된 예제: REF -test중.

위 예제들에서 javascript 변수에 값 설정만 잘하면 된다.

추가로, 만약 Themeleaf를 사용하고 있다면..

<script th:inline="javascript">
    /*<![CDATA[*/
    var query = [[${query}]];
    console.log(message);
    /*]]>*/
</script>

방식으로 간단히 themeleaf변수를 javascript에 넣을 수 있다.

복잡한 변수의 경우 themeleaf파싱이 필요한데.. REF1

다음과 같이 themeleaf와 value, label을 조합해 사용할 수 있다.

<script type="text/javascript" th:inline="javascript">
  /*<![CDATA[*/
  $(function () {
    var suggestionData = [[${javaData}]];
    $('#users').autocomplete({
      source: suggestionData,
      select: function (event, ui) {
        //prevent .val(value) to input_text
        event.preventDefault();
        //.val(label) and store selected Value
        $('#users').val(ui.item.label);
        $('#userSelected').val(ui.item.value);
      },
      focus: function (event, ui) {
        //prevent .val(value) to input_text
        event.preventDefault();
      }
    });
  });
  /*]]>*/
</script>

단, java에서는 Array혹은 ArrayList로 label,value를 멤버로 가지고 있는 class의 list를 넘겨야 한다.

저작자표시

Posted by yongary

,

jQuery를 이용한 List/Edit 겸용 페이지

FRONT-END 2017. 5. 23. 16:25

하나의 html페이지로 Listing과 Editing을 동시에 수행하는 페이지는 다음과 만들 수 있다.

(참고: jQuery와 themeleaf이용)

포인트: flag(isEditMode)를 두어서 list인지 Edit인지를 구분하고,

그에 따라 필요한 버튼을 hide/show

input을 readonly or not 으로 세팅한다.

<script type="text/javascript" th:inline="javascript">
  /*<![CDATA[*/
  $(function () {
    allReload();

    //list-edit Mode switch
    function allReload() {
      if ($('#isEditMode').val() == 'true'){
        $('.form-control').prop('readonly', false);
        $('.form-control').css('border', '1px solid #ccc');
        $('#editBtn').hide();
        $('#storeBtn').show();
        $('#cancelBtn').show();
      } else {
        $('.form-control').prop('readonly', true);
        $('.form-control').css('border', 'none');
        $('#editBtn').show();
        $('#storeBtn').hide();
        $('#cancelBtn').hide();
      }
    }

    $('#editBtn').click(function () {
      $('#isEditMode').val('true');
      allReload();
    });

    $('#cancelBtn').click(function () {
      $('#isEditMode').val('false');
      allReload();
    });
    //Button process


  });
  /*]]>*/
</script>

<input type="hidden" id="isEditMode" th:value="${isEditMode}"/>
<form id="form" method="post" enctype="multipart/form-data" th:object="${chatRankingCoefficientForm}"
      action="/app/chat/ranking/constant">
  <table class="table table-hover table-bordered"
         style="word-break: break-all;word-wrap: break-word;" border="1">
    <tr>
      <th style="text-align:center">ranking</th>
      <th style="text-align:center">Value</th>
    </tr>
    <tr>
      <td>Days of Evaluation</td>
      <td>
        <input class="form-control" readonly="true" style="border:none;background-color:transparent;"
               type="number" th:field="*{daysOfEvaluation}"/>
        <div th:classappend="${#fields.hasErrors('daysOfEvaluation')} ? 'has-error'">
          <span th:if="${#fields.hasErrors('daysOfEvaluation')}" th:errors="*{daysOfEvaluation}"
                class="help-block">error!</span>
        </div>
      </td>
    </tr>
..중략
  <p> <!-- BUTTONS -->
    <a class="btn btn-primary" id="editBtn">edit</a>
    <input type="submit" class="btn btn-primary" id="storeBtn" value="save" />
    <a th:href="@{/app/chat/ranking/constant}" class="btn btn-secondary" id="cancelBtn">cancel</a>
  </p>
</form>

저작자표시

Posted by yongary

,

cookie 와 JSESSIONID

FRONT-END 2017. 5. 18. 12:11

브라우저에서 쿠키를 이러저러 여러가지 값으로 설정할 수 있는데 REF

Tomcat의 경우는

JSESSIONID 변수를 쿠키로 주고받으면서 세션을 유지한다. REF

웹서버마다 방식이나 변수명이 다르므로 확인이 필요하다.

nginx웹서버의 경우 cc변수로 보인다.

현재쿠키는 javascirpt:document.cookie 를 주소창에 치면 쉽게 확인할 수 있다.

쿠키를 조작해서 테스트하고 싶을때는 postman , 그 중에서도 postman intercepter를 크롬에 설치하면 가능하다.

저작자표시

Posted by yongary

,

bootstrap 모달팝업 & aria-hidden & text Color

FRONT-END 2017. 3. 16. 16:34

bootstrap을 이용해서 table도 쉽고 이쁘게 만들 수 있지만

팝업도 간단히 이쁘게 만들 수 있다.

게다가 팝업이 약간씩 멋지게 움직이는 효과도 있어 심미적으로 만족감도 상당하다.

팝업은 modal ( 팝업이 뜨면서 팝업안에서만 작업이 되는 팝업을 일컫는 단어) 을 이용하면 되고

팝업이 나타나면서 움직이는 효과는 aria-hidden을 이용하면 된다.. REF

bootstrap.min.css LINK 및

bootstrap.min.js 정도추가하면 되고.. 및

modal DIALOG의 구조는 아래와 같은 구조.

<div class="modal fade"  role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
<div class="modal-header">
<div class="modal-body"> 
<div class="modal-footer">

TEXT Color

<p class="text-muted">...</p> //grey
<p class="text-primary">...</p> //light blue
<p class="text-success">...</p> //green
<p class="text-info">...</p> //blue
<p class="text-warning">...</p> //orangish,yellow
<p class="text-danger">...</p> //red

저작자표시

Posted by yongary

,

jQuery DatePicker TimePicker

FRONT-END 2017. 3. 14. 12:33

웹상에서 간단히 날짜 선택창을 만들고 싶다면

jQuery의 DatePicker모듈을 이용하는 것이 좋아 보인다.

REF (우측 상단에 예제 있음)

TimePicker도 시간입력용으로 좋은데,

시간을 step단위로 지정이 가능하다. REF

var timeFix;
function timeFixClick(minutes) {
  timeFix.val(minutes);
  $('#timeModal').modal('show');
}

$(document).ready(function () {
  timeFix = $('#timeFix');

  datePicker.datepicker({
    format: "yyyy-mm-dd",
    viewMode: "days",
    minViewMode: "days",
  });

  timePicker.timepicker();
  timePicker.timepicker('option', 'step', '30'); //30분 단위로 시간 선택가능.

<html>

<input name="expireTime" class="form-control" data-time-format="H:i:s" id="timePicker" type="text" size="8" />

<a th:onclick="'javascript:timeFixClick(\'' + ${ticket.minutes} + '\');'" th:text="修正" />

<js 시간 Library> - REF: https://momentjs.com/

(사용 예)

var date = moment(dateData).format('YYYY-MM-DD');

var time = moment(dateDate).format('HH:mm:ss');

저작자표시

Posted by yongary

,

bootstrap 테이블디자인

FRONT-END 2017. 1. 31. 16:17

간단한 테이블 디자인은 bootstrap css 에서 가져다 쓰는게 최선인것 같다.

기본적으로 column은 12column을 기본으로 하므로, 12안에서 나누어쓰면 된다.

관련해서 bootstrap은 크기별 이름명명 규칙이 있다. REF

테이블 디자인 class도 사전에 정의되어 있다. REF

저작자표시

Posted by yongary

,

thymeleaf 기본.

FRONT-END 2016. 12. 19. 22:18

REF-Tutorial

REF기본:

REF-dateForamtter등 발전된기능 {{}}:dateFormatter

(단, 이경우는 WebMvcConfig.java나 xml등에 addFormatter override나, formatter지정이 필요. Ref안에 xml은 있음)

spring의 thymeleaf를 통해 java의 EL을 html에 사용하는 듯한 느낌으로 사용할 수 있다.

@{ }로 사용하는 Variable expression은 java의 EL과 동일하고,

그 외에도 다음과 같은 것들이 있다.

${...} : Variable expressions - iterator처럼 반복도 지원된다.
*{...} : Selection expressions. - th:object = ${book}과 같이 $로 선택된 object내에서 동작한다.
#{...} : Message (i18n) expressions. - 다국적 메시지 지원.
@{...} : Link (URL) expressions. -변수 파라미터도 가능하고, 상대경로 URL도 가능

ex) th:href="@{'/app/user/'+${user.id}+'/bustickets'}

~{...} : Fragment expressions. - 주로 div안으로 삽입 가능.

thymeleaf 로 form을 submit할 때는 다음과 같다. REF

<form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
    	<p>Id: <input type="text" th:field="*{id}" /></p>
        <p>Message: <input type="text" th:field="*{content}" /></p>
        <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
    </form>

@{/greeting} : 처리할 URL

${greeing} : model형태로 넘길 object

th:text 보다는 th:field를 써야 object매핑이 되겠군요.

<table if 사용법> REF

<td th:if="${member.status} == '1'" th:text="Active"></td>
<td th:unless="${member.status} == '1'" th:text="Inactive"></td>

<a th:if="${history.myProject.payType eq 'credit_card'}"

==> { }안에서 string비교시 eq도 사용가능.

<td class="col-sm-2" th:switch="${ticket.status}">
  <span th:case = 'unused'> "Unused"</span>
  <span th:case = 'used'> "Used"</span>
  <span th:case = 'unknown'> "Unknown"</span>
</td>

<enum사용시>

<td class="col-sm-1" th:if="${ticket.type == T(my.constant.TicketType).PAID}" th:text="Paid"></td>

${ticket.isExpired()}와 같이 public 함수도 사용이 가능하다.

==고급===

[[ ]] in-line 프로그래밍. REF

${{ }} 자동변환. REF

==th 함수==

${#strings.isEmpty(...))}

${#lists.size(...)}

th:block - 매우 유용. 전체 block을 if로 묶어서 나타내거나 숨길 수 있음.

  <th:block th:if="${@environmentHelper.isBeta()}">
   각종 javascript등.. 코드
</th:block>

저작자표시

Posted by yongary

,

tomcat 설치 (Linux)

FRONT-END 2015. 12. 1. 21:19

rpm이나 deb로 설치 후,

etc/profile 5줄 추가==================

JAVA_HOME=/usr/lib/jvm/jre-1.7.0-openjdk.amd64

CATALINA_HOME=/usr/share/tomcat7

CLASSPATH=.:$JAVA_HOME/lib/tools.jar:$CATALINA_HOME/lib/jsp-api.jar:$CATALINA_HOME/lib/servlet-api.jar

PATH=$PATH:$JAVA_HOME/bin:$CATALINA_HOME/bin

export JAVA_HOME CLASSPATH PATH CATALINA_HOME

============

======tomcat port 수정.

/etc/tomcat7/server.xml 수정. 8080->80

service tomcat7 restart

(Ubuntu인 경우 필요할 수 있음)

autobind를 이용한 80포트 사용토록 수정.

http://blog.ciaranoconnor.me/2015/01/12/configuring-tomcat7-to-port-80-on-ubuntu/

=======front-end 소스를

/var/lib/tomcat7/webapps/ROOT 밑에 복사.

저작자표시

Posted by yongary

,

EL & JSTL

FRONT-END 2015. 9. 16. 08:45

(spring 분류에도 같은 글 존재)

EL (expression language) -> JSP2부터 지원.

${param.id} = 기존의 request.getParameter("id");와 동일

${member} = request.getAttribute("member");

${member.name} : Member m = (Member)request.getAttribute("member");m.getName();

${list["0"]} : List list = (List)request.getAttribute("list"); list.get(0);

JSTL (JavaServer Pages Standard Tag Library ) -> c tag를 가장 많이 사용.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> // c:tag사용.

<c:forEach items="${list}" var="oneItem" >

<td> ${oneItem.title} </td>

</c:forEach>

<c:if test="${stable}">checked="checked"</c:if>

<c:if test="${menuNameVo.useYn eq 'Y'}">checked</c:if>

참고사이트: http://egloos.zum.com/slog2/v/3581446

https://docs.oracle.com/javaee/6/tutorial/doc/bnahq.html

저작자표시

Posted by yongary

,

browser byte-range request

FRONT-END 2015. 9. 10. 13:22

브라우저가 html5 video tag에서 mp4동영상을 재생할 때,

byte-range request를 이용하게 된다.

MPGE이 기본적으로 188-byte단위로 패킷을 구성하기 때문에 이러한 방식이 가능하다.

animated-GIF 의 경우에는 byte-range 로 스트리밍 받으면서

재생이 될까? 이 부분에 답은 아직 못 찾았지만

android 브라우저에서 충분히 빠른 것으로 봐서,

gif도 byte-range 전송이 되는 것으로 보인다.

==> 이 부분 확인을 위해서 tcpdump로 잡아보니,

1448 byte 짜리 패킷이 무수히 많이 서버->Client로 전송된다.

====tcpdump ==

14:42:32.699931 IP 192.168.0.67.http-alt > 192.168.0.101.42947: Flags [.], seq 7422086:7423534, ack 1030, win 244, options [nop,nop,TS val 5415908 ecr 6751675], length 1448

14:42:32.699940 IP 192.168.0.67.http-alt > 192.168.0.101.42947: Flags [.], seq 7423534:7424982, ack 1030, win 244, options [nop,nop,TS val 5415908 ecr 6751675], length 1448

14:42:32.699946 IP 192.168.0.67.http-alt > 192.168.0.101.42947: Flags [.], seq 7424982:7426430, ack 1030, win 244, options [nop,nop,TS val 5415908 ecr 6751675], length 1448

저작자표시

Posted by yongary

,

HTML5 Video tag + CSS

FRONT-END 2015. 8. 31. 09:23

<html>

<head>

#texts{
font-size : 36px;
margin : 5%;
}
</style>

</head>

<video id="video" controls> // Ref-Site:
<source src="mpp_vod.mp4" type="video/mp4">
Browser does not support HTML5 mp4.
</video>

<br/>
<br/>

<p id="texts">
Test용 동영상입니다.<br/><br/>
</p>

</body>
</html>

저작자표시

Posted by yongary

,

IT & Mobile

'FRONT-END'에 해당되는 글 15건

css 예제 + position 4가지

CSS 기본

front-end 기본상식들

jQuery, Form-validation

jQuery AutoComplete을 이용한 suggestion Box + themeleaf

jQuery를 이용한 List/Edit 겸용 페이지

cookie 와 JSESSIONID

bootstrap 모달팝업 & aria-hidden & text Color

jQuery DatePicker TimePicker

bootstrap 테이블디자인

thymeleaf 기본.

tomcat 설치 (Linux)

EL & JSTL

browser byte-range request

HTML5 Video tag + CSS

링크

카테고리

최근에 올라온 글

태그목록

달력

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

티스토리툴바


	by yongary