# box-shadow




box-shadow : 요소의 테두리를 감싼 그림자 효과

그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함, 확산 정도, 색상으로 이루어진다.

browser support : ie9 이상


offset-x : 위 아래

offset-y : 좌 우

blur-radius : 값이 클 수록 그림자가 흐려진다.

spread-radius : 양수- 그림자가 커지고 확산됨. 음수- 그림자가 줄어듬.

color : 그림자 색상

inset : 박스 내에 그림자


/* offset-x , offset-y , color */
box-shadow : 10px 10px black;

/* offset-x , offset-y , blur-radius , color */
box-shadow : 10px 10px 5px black;

/* offset-x , offset-y , blur-radius , spread-radius , color */
box-shadow : 10px 10px 5px 3px rgba(0,0,0,0.3);

/* inset , offset-x , offset-y , color */
box-shadow : inset 10px 10px black;




'Front-end dev > HTML || CSS' 카테고리의 다른 글

CSS 말줄임  (513) 2020.01.06
Tag  (794) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
내 입맛에 맞춘 Reset.css  (520) 2018.04.03

# CSS 말줄임



1. 한줄

브라우저 지원 IE7 ~ , Chrome, safari, firefox

.text {
        white-space:nowrap;         //줄바꿈이 되지 않게 처리
        overflow:hidden;            //넘치는 글자를 잘라줌
        text-overflow:ellipsis;     //... 처리
      }

이렇게 적용해도 안되는 경우에는 width 값을 적용해주어야한다.


2. 두줄

브라우저 지원 Chrome, safari    // IE, firefox 는 지원하지 않음

.text {
        font-size:1em;                    //폰트 사이즈 지정
        overflow:hidden;                  //넘치는 글자를 잘라줌
        text-overflow:ellipsis;           //... 처리
        line-height:1.5;                  //줄 높이를 설정
        height:3em;                       //높이 설정
        word-wrap:break-word;             //긴단어를 끊어서 줄바꿈하기
        display:-webkit-box;              //flex box 형대로 바꾸줌
        -webkit-line-clamp:2;             //보여줄 줄의 갯수
        -webgit-box-orient:vertical;      // flex box의 방향 설정
      }



'Front-end dev > HTML || CSS' 카테고리의 다른 글

box-shadow  (439) 2020.07.08
Tag  (794) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
내 입맛에 맞춘 Reset.css  (520) 2018.04.03

# Tag



# <!--...-->

주석 태그는 소스 코드에 주석을 삽입하는 데 사용됩니다. 주석은 브라우저에 표시되지 않습니다.

<!--주석을 사용하여 코드를 설명 할 수 있습니다.-->

<h1>#아라의 개발노트</h1>

<script type="text/javascript">
<!--
    function hungry() {
        alert('곱창먹고싶다!');
    }
//-->
</script>    

    주석 줄 끝에있는 두 개의 슬래시(//)는 JavaScript의 주석 기호입니다.



# <!DOCTYPE>
<!DOCTYPE> 선언은 HTML 문서에서 <html> 태그보다 먼저 있어야합니다.
<!DOCTYPE> 선언은 HTML 태그가 아닙니다. 페이지가 쓰여지는 HTML의 버전에 대한 웹 브라우저의 지시입니다.

<!DOCTYPE html>
<html>
<head>
<title>#아라이의 개발노트</title>
</head>
<body>
HTML Tag 정리
</body>
</html>

    HTML5는 SGML을 기반으로하지 않으므로 DTD에 대한 참조가 필요하지 않습니다.
    HTML 4.01과 HTML5의 차이점 - HTML 4.01에는 세 가지의 다른 <! DOCTYPE> 선언이 있습니다. HTML5에는 단 하나만 있습니다.



# <a>
<a> 태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼 링크를 정의합니다.
<a> 요소의 가장 중요한 속성은 링크의 목적지를 나타내는 href 속성입니다.

<a href="https://heeya7.tistory.com/7?category=729699">#console.log에 style 적용하기</a>

    href 속성이 없으면 download, hreflang, media, rel, target 및 type 속성은 존재할 수 없습니다.



# <address>
<address> 태그는 문서 또는 기사의 작성자/소유자에 대한 연락처 정보를 정의합니다.
<address> 요소의 텍스트는 대개 이탤릭체로 표시 됩니다. 대부분의 브라우저는 주소 요소 앞뒤에 줄 바꿈을 추가합니다.

<address>서울특별시 관악구</address>

    연락처 정보의 일부가 아닌 경우 <address> 태그는 우편 주소를 설명하는 데 사용해서는 안됩니다.
    <address> 요소는 일반적으로 다른 정보와 함께 <footer> 요소에 포함됩니다.



# <article>
<article> 태그는 독립적인 컨테츠를 지정합니다. 기사는 독자적으로 이해되어야하며, 사이트와 독립적으로 기사를 배포 할 수 있어야합니다.

<article>
    <h1>#아라</h1>
    <p>#아라의 블로그에는 HTML, CSS, JavaScript, jQuery 등의 정보가 담겨있습니다.</p>
</article>

    ex) 포럼 게시물, 블로그 게시물, 뉴스 기사, 논평 등
    HTML 4.01과 HTML5의 차이점 - <article> 태그는 HTML5에서 새로 추가되었습니다.

    Browser support // Chrome 6.0   IE 9.0   Firefox 4.0   Safari 5.0   Opera 11.1



# <aside>
<aside> 태그는 주요한 내용이 아닌 부차적인 내용을 담습니다. 

<p>aside 태그는 블로그에서 흔히 볼 수 있는 사이드바의 메뉴나 배너(광고)를 생각하면 된다.</p>

<aside>
    <h3>#아라의 개발노트 카테고리</h3>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">JavaScript</a>
    <a href="#">jQuery</a>
</aside>

    ex) 관련 페이지, 콘텐츠 사이드 바, 답글 영역, 전체 인용, 광고 영역 등
    HTML 4.01과 HTML5의 차이점 - <aside> 태그는 HTML5에서 새로 추가되었습니다.

    Browser support // Chrome 6.0   IE 9.0   Firefox 4.0   Safari 5.0   Opera 11.1



# <audio>
<aside> 태그는 주요한 내용이 아닌 부차적인 내용을 담습니다. 

<audio controls>
    <source src="test.ogg" type="audio/ogg">
    <source src="test.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

    ex) 관련 페이지, 콘텐츠 사이드 바, 답글 영역, 전체 인용, 광고 영역 등ㅇ
    HTML 4.01과 HTML5의 차이점 - <aside> 태그는 HTML5에서 새로 추가되었습니다.

    Browser support // Chrome 6.0   IE 9.0   Firefox 4.0   Safari 5.0   Opera 11.1




'Front-end dev > HTML || CSS' 카테고리의 다른 글

box-shadow  (439) 2020.07.08
CSS 말줄임  (513) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
내 입맛에 맞춘 Reset.css  (520) 2018.04.03

메모)

​하이브리드 앱 개발중 android와 ios의 다른 점 발견


​ios(safari) 에만 기본적으로

input:disabled, textarea:disabled {opacity:0.4;} 가 ​적용된다.

​공통작업이 따로 필요할듯!

'Front-end dev > HTML || CSS' 카테고리의 다른 글

CSS 말줄임  (513) 2020.01.06
Tag  (794) 2020.01.06
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
내 입맛에 맞춘 Reset.css  (520) 2018.04.03
Normalize.css (v8.0.0)  (527) 2018.04.03

# input type="radio", type="checkbox" customizing




퍼블리싱을 하다보면 디자인이 된 input 을 종종 작업하게 됩니다.

오늘은 input[type="radio"], input[type="checkbox"] 커스터마이징에 대한 포스팅을 해볼까 합니다.



Result


이렇게 만들어볼거에요 : )




HTML
<!-- 라디오버튼_on -->
<input type="radio" id="on" name="radio" checked>
<label for="on">라디오버튼_on</label>

<!-- 라디오버튼_off -->
<input type="radio" id="off" name="radio">
<label for="off">라디오버튼_off</label>

- 웹접근성에 맞게, input 태그의 id 값과 label 태그의 for 값을 맞춰줍니다. 
   (이렇게 하면 label 태그를 클릭했을 때, input과 연결시킬 수 있어요!)
input 태그의 name 값을 통일시켜서 같은 목적의 radio 버튼임을 명시해줍니다.
   (name 값을 맞춰주지 않으면, 각각 별개의 radio 버튼이 되어버려요)


CSS
.radio {
    visibility: hidden;
    position: absolute;
}
.radio + label {
    display: inline-block;
    margin-right: 15px;
    padding-left: 20px;
    font-size: 16px;
    color: #333333;
    background: url('/img/radio_off.png') left no-repeat;
    cursor: pointer;
}
.radio:checked + label {
    background: url('/img/radio_on.png') left no-repeat;
}

- radio{ position: absolute; } 의 값은 마크업, 혹은 디자인에 따라 absolute, relative 혹은  static(default 값)으로 조정이 필요합니다.
(상황에 맞게 작업해주셔야해요, 레이아웃이 깨질 수도 있어요!)
- 작업하시면서 radio 이미지 사이즈에 맞에 위치값들도 조정해주세요 : )



네. 이렇게 아주 간단히 input 커스텀을 해보았어요
input[type="checkbox"] 역시 radio 와 동일하게 작업해주시면 됩니다!

끝!

'Front-end dev > HTML || CSS' 카테고리의 다른 글

Tag  (794) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
내 입맛에 맞춘 Reset.css  (520) 2018.04.03
Normalize.css (v8.0.0)  (527) 2018.04.03
시멘틱 마크업을 위한 콘텐츠 요소 판별  (586) 2018.03.30

+ Recent posts