012

 

호계식 식당은 망원과 공덕

두곳에 있는것 같아요

 

글쓴이는 공덕에서

닭온반을 먹고 왔습니다.

 

메뉴는 닭온반 / 닭국수가

메인 같았고 

닭도리 탕도 있었어요

 

주문한 닭온반이 나오고

특이하다고 생각했던건

다른 식당과 달리

밥과 국을 따로

주시는게 아니고

밥이 국물에 말아져서

나왔어요 

 

국물에 닭 껍질튀긴게

들어가있는데

이게 정말 고소하고

국물안에서도 파삭한게

별미 였습니다.

 

아 그리고

국물을 얼큰으로

주문도 가능한데

많이 맵지는 않았어요

 

공덕 망원 주변에서

따듯하고 깜끔한 국물과

한끼를 해결하고

싶은 분들에게 추천

해드리고 싶은

식당이었습니다.

 

 

※ 개인적인 평가

맛

깔끔한 국물로 평소 먹어보지 못했던 닭요리에 독특함을 느꼈습니다.

글쓴이는 먹으면서 조금 고급스러운 닭곰탕느낌을 받았어요!
식당 분위기

식당이 넓지 않고 좁은 느낌은 있지만

대기도 없었고 매장도 깔끔하고 직원분들이 친절하셔서 좋은 분위기에 식사하였습니다.
기타 가끔 주변을 지나가다가 따듯한 국물이 생각나면 다시 찾을것 같은 식당~!

 

글쓴이는 요리를 전문적으로 배운적이 없으며 맛있는 음식을 먹는걸 좋아 하는 그냥 평범한 사람입니다.

맛평가는 지극히 개인적인 생각이니 참고용으로만 봐주세요~!

 

 

 

 

 

 

 

'▶ 맛집 탐방' 카테고리의 다른 글

[맛집 탐방] 일산 - 일산칼국수/닭칼국수 맛있는집  (0) 2019.11.10

 

일산 칼국수 본점을 다녀왔습니다~

주말에는 주차 요원만 5분이 넘을정도로 사람이 많다는

소문만 들었지 직접 가본건 처음 이었어요

 

소문과 같이 줄이 엄청 길었는데

30분정도 기다리고 자리에 앉으니

칼국수는 금방 나왔습니다~

 

칼국수는 진짜 기다린게 아깝지 않을 만큼 맛있어요

국물은 정말 찐하고

면도 적당히 잘익어서

역시 유명해진 집은 이유가 있구나 라고 생각했습니다.

 

가격도 비싸지 않고 양도 많아서

집이 근처라면 부담없이 자주 먹으러 갔을것 같아요!

한그릇 깔끔하게 다비우고 오는길에 2개 포장까지 해서 돌아왔습니다.

 

※ 개인적인 평가

맛 정말 맛있습니다. 개인적으로 먹어본 닭칼국수 중 최고였어요. 
식당 분위기

그냥 평범한 집주변에 서 쉽게 볼수있는 디자인의 식당입니다.

다만 사람이 많은만큼 조금 어수선하게 느낄수도 있을것 같습니다.
기타 글을 쓰고 있는 지금도 또가서 먹고싶다...

 

글쓴이는 요리를 전문적으로 배운적이 없으며 맛있는 음식을 먹는걸 좋아 하는 그냥 평범한 사람입니다.

맛평가는 지극히 개인적인 생각이니 참고용으로만 봐주세요~!

 

 

 

 

 

'▶ 맛집 탐방' 카테고리의 다른 글

[맛집 탐방] 공덕 - 호계식 / 닭온반 먹고 왔어요  (0) 2019.11.13

CSS 선택자 정리

:nth-child(N)
= 부모안에 모든 요소 중 N번째 요소
A:nth-of-type(N)
= 부모안에 A라는 요소 중 N번째 요소
:first-child
= 부모안에 모든 요소 중 첫번째 요소
:last-child
= 부모안에 모든 요소 중 마지막 요소
A:first-of-type
= 부모안에 A라는 요소 중 첫번째 요소
A:last-of-type
= 부모안에 A라는 요소 중 마지막 요소

nth-child

:nth-child(1) = 첫번째 선택
span

p

span

p

span

p

p

p

p

p

:nth-child(2n) = 두번째 마다 선택
span

p

span

p

span

p

p

p

p

p

:nth-child(2n+1) = 첫번째 요소부터 2번째 마다 선택
span

p

span

p

span

p

p

p

p

p

:nth-child(2n+5) = 다섯번째 부터 2개 마다 선택
span

p

span

p

span

p

p

p

p

p

:nth-child(-2n+5) = 첫번째 요소부터 5번째 요소까지 2개 마다 선택
span

p

span

p

span

p

p

p

p

p

:nth-child(n+5) = 5번째 부터 모두 선택
span

p

span

p

span

p

p

p

p

p

:nth-child(-n+5) = 앞에서부터 5개만 선택
span

p

span

p

span

p

p

p

p

p

:nth-child(n+3):nth-child(-n+8) = 선택자를 두번 사용하여 교집합인 요소만 선택할 수 있다.
span

p

span

p

span

p

p

p

p

p

:nth-child(odd) = 홀수 선택
span

p

span

p

span

p

p

p

p

p

:nth-child(even) = 짝수 선택
span

p

span

p

span

p

p

p

p

p

nth-of-type

p:nth-of-type(1) = 부모안에 요소 중 첫번째 p요소 선택
span

p

span

p

span

p

p

p

p

p

p:nth-of-type(2n+1) = 부모안에 p요소 중 첫번째부터 2번째마다 선택
span

p

span

p

span

p

p

p

p

p

p:nth-of-type(n+2):nth-of-type(-n+5) = 선택자를 두번 사용하여 교집합인 요소만 선택할 수 있다.
span

p

span

p

span

p

p

p

p

p

※ :nth-child와 마찬가지로 모든 선택자 속성을 사용할 수 있다.

※ :nth-child와 차이점은 모든 속성이 아닌 선택한 요소 중에서 선택을 한다.

first-child

:first-child = 부모안에 모든 요소 중 첫번째 요소 선택
span

p

span

p

span

p

p

p

p

p

last-child

:last-child = 부모안에 모든 요소 중 마지막 요소 선택
span

p

span

p

span

p

p

p

p

p

first-of-type

p:first-of-type = 부모안에 모든 p요소 중 첫번째 p요소 선택
span

p

span

p

span

p

p

p

p

p

last-of-type

span:last-of-type = 부모안에 모든 span요소 중 마지막 span요소 선택
span

p

span

p

span

p

p

p

p

p

jQuery이용하여 Tab Menu 만들기

Tab Menu Design1
Menu01 Menu02 Menu03
--Contents01--





--Contents02--





--Contents03--





Code 보기
<div id="BtnWrapper0" class="tabBtnWrap clearfix">
    <a href="#work1_1" class="active">Menu01</a>
    <a href="#work1_2">Menu02</a>
    <span class="disabled">Menu03</span>
</div>

<div id="ConWrapper0" class="tabConWrap">
    <div id="work1_1" class="con">
        --Contents01--
    </div>
    <div id="work1_2" class="con dp_no">
        --Contents02--
    </div>
    <div id="work1_3" class="con dp_no">
        --Contents03--
    </div>
</div>
/*공통*/
.dp_no{
    display:none;
}

/*Tab Menu Css*/
.tabBtnWrap{
    margin-bottom:-1px;
}

.tabBtnWrap a{
    display: block;
    float:left;
    padding:0 15px;     text-align: center;
    line-height:35px;
    background:#eee;
    border: 1px solid #ddd;
    transition:all 0.2s;
}

.tabBtnWrap a.active{
    background:#fff;
    border-bottom: 1px solid #fff;
}

.tabBtnWrap a:hover{
    background:#fff;
}

.tabBtnWrap span.disabled{
    background:#ddd;
    color:#fff;
    cursor:no-drop;
}

.tabConWrap{
    width: 100%;
}

.tabConWrap .con{
    display:none;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
}

.tabConWrap .con:nth-child(1){
    display:block;
}
function TabMenu(btn,conWrap){
    var $tl = $(btn);
    var $ta = $tl.find('a');
    var $co = $(conWrap).find('.con');

    $ta.on('click',function(event){
        event.preventDefault();

        if($(this).hasClass('active')){
            return;
        };

        $ta.removeClass('active');
        $(this).addClass('active');
        $co.css({'display':'none'});
        $($(this).attr('href')).css({'display':'block'});
    });
};

$(function(){
    TabMenu('#BtnWrapper0','#ConWrapper0');
});
Tab Menu Design2(반응형)
Menu01 Menu02 Menu03
Menu01
--Contents01--





Menu02
--Contents02--





Menu03
--Contents03--





Code 보기
<div id="BtnWrapper2" class="mobile_tabBtnWrap clearfix">
    <a href="#work2_1" class="active">Menu01</a>
    <a href="#work2_2">Menu02</a>
    <span class="disabled">Menu03</span>
</div>

<div id="ConWrapper2" class="tabConWrap2">
    <div class="ReactiveConWrap">
        <div id="" class="mobile_tabBtnWrap mobile clearfix">
            <a href="#work2_1" class="active">Menu01</a>
        </div>
        <div id="work2_1" class="con">
            --Contents01--
        </div>
    </div>
    <div class="ReactiveConWrap">
        <div id="" class="mobile_tabBtnWrap mobile clearfix">
            <a href="#work2_2">Menu02</a>
        </div>
        <div id="work2_2" class="con">
            --Contents02--
        </div>
    </div>
    <div class="ReactiveConWrap">
        <div id="" class="mobile_tabBtnWrap mobile clearfix">
            <span class="disabled">Menu03</span>
        </div>
        <div id="work2_3" class="con">
            --Contents03--
        </div>
    </div>
</div>
/*공통*/
.dp_no{
    display:none;
}

/*Tab Menu Css*/
.mobile_tabBtnWrap{
    margin-bottom:-1px;
}

    
.mobile_tabBtnWrap.mobile{
    display:none;
}

.mobile_tabBtnWrap a,
.mobile_tabBtnWrap span{
    display: block;
    float:left;
    width:33.333%;
    padding:0 10px;

    text-align: center;
    line-height:35px;

    background:#eee;
    border: 1px solid #ddd;

    transition:all 0.2s;
}

.mobile_tabBtnWrap a.active{
    background:#fff;
    border-bottom: 1px solid #fff;
}

.mobile_tabBtnWrap a:hover{
    background:#fff;
}

.mobile_tabBtnWrap span.disabled{
    background:#ddd;
    color:#fff;
    cursor:no-drop;
}

.tabConWrap2{
    width: 100%;
}

.tabConWrap2 .ReactiveConWrap .con{
    padding: 15px;
    display:none;
    background: #fff;
    border: 1px solid #ddd;
}

.tabConWrap2 .ReactiveConWrap:nth-child(1) .con{
    display:block;
}

@media (max-width:639px){
    .mobile_tabBtnWrap{
        display:none;
        margin-bottom:0;
    }

    .mobile_tabBtnWrap.mobile{
        display:block;
    }

    .mobile_tabBtnWrap.mobile a,
    .mobile_tabBtnWrap.mobile span{
        width:100%;
    }
}
function TabMenu(btn,conWrap){
    var $tl = $(btn);
    var $ta = $tl.find('a');
    var $co = $(conWrap).find('.con');

    $ta.on('click',function(event){
        event.preventDefault();

        if($(this).hasClass('active')){
            return;
        };

        $ta.removeClass('active');
        $(this).addClass('active');
        $co.css({'display':'none'});
        $($(this).attr('href')).css({'display':'block'});
    });
};

$(function(){
    TabMenu('.mobile_tabBtnWrap','#ConWrapper0');
});
Tab Menu Design3(반응형)
--Contents01--





--Contents02--





--Contents03--





Code 보기
<div class="wrapperExample mb10">
    <div class="tabBtnAllWrap">
    <div id="BtnWrapper4" class="tabBtn_3_Wrap clearfix">
        <a href="#work3_1" class="active">Menu01</a>
        <span>|</span>
        <a href="#work3_2">Menu000002</a>
        <span>|</span>
        <a href="#work3_3">Menu003</a>
    </div>
    <span class="activeBar"></span>
    </div>

    <div id="ConWrapper4" class="tabCon_3_Wrap">
    <div id="work3_1" class="con">
        --Contents01--
    </div>
    <div id="work3_2" class="con">
        --Contents02--
    </div>
    <div id="work3_3" class="con">
        --Contents03--
    </div>
    </div>
</div>
.tabBtnAllWrap{
    position: relative;
}

.tabBtn_3_Wrap{
    padding:5px 0;
    border-bottom:3px solid #999;
}

.tabBtn_3_Wrap a{
    display: block;
    float:left;
    margin-right:10px;
    margin-left:10px;
}

.tabBtn_3_Wrap span{
    display: block;
    float:left;
    color:#cfcfcf;
}

.activeBar{
    display:block;
    position:absolute;
    width:79px;
    height:3px;
    bottom:0;
    background:red;
    z-index:999;
}

.tabBtn_3_Wrap a:nth-child(1){
    margin-left:10px;
}

.tabBtn_3_Wrap a:last-child{
    margin-right:0;
}

.tabCon_3_Wrap .con{
    display:none;
    border-bottom:1px solid #999;
}

.tabCon_3_Wrap .con:nth-child(1){
    display:block;
}
function TabMenu(btn,conWrap){
    var $tl = $(btn);
    var $ta = $tl.find('a');
    var $co = $(conWrap).find('.con');

    $ta.on('click',function(event){
        event.preventDefault();
        
        if($(this).hasClass('active')){
            return;
        };

        $ta.removeClass('active');
        $(this).addClass('active');
        $co.css({'display':'none'});
        $($(this).attr('href')).css({'display':'block'});

    //버튼 엑티브시 엑티브바 이동 및 길이 동작
    var thisBtnWidth = $(this).outerWidth()+20;
    var thisTabpositionL = $('.tabBtn_3_Wrap').offset().left;
    var thisBtnPositionL = $(this).offset().left;
    var thisBtnPositionL = thisBtnPositionL-thisTabpositionL-10;

    $('.activeBar').animate({
        'left':thisBtnPositionL,
        'width':thisBtnWidth
    },200,'linear');
    });
};

$(function(){
    TabMenu('#BtnWrapper4','#ConWrapper4');
});

블록요소(Block Elements)

태그들을 담을 수 있고 높이, 너비, 여백 등의 지정이 가능합니다. 블록태그 다음에 오는 요소는 자동으로 줄바꿈이 적용됩니다.

h1 h2 h3 h4 h5 h6 div ol ul li dl dt dd p form fieldset table address blockquote hr pre header footer section article canvas video audio


Heading

Heading 태그는 문서, 쳅터의 "제목" 영역에 사용합니다. 

h1 ~ h6까지 태그가 있고 중요도가 높은 주제는 h1, 가장 중요도가 낮은 주제는 h6으로 표시합니다.

  • Heading Tag를 잘 사용하면 검색엔진 최적화에 유리합니다.
  • Heading 태그는 하나의 문서에 중복 사용이 가능합니다. h2 태그를 하나의 문서에서 10번 20번 사용해도 상관없으나 "제목"에 해당하는 곳에서만 사용하는 것이 좋습니다. Heading 태그의 무분별한 사용은 검색엔진 최적화에 악영향을 주게 됩니다.
  • h1 태그는 페이지에서 가장 중요한 "제목"을 나타내는 태그입니다. 하나의 문서에 한번만 사용하는 것이 좋습니다.
사용 예)

<h1>문서 내 가장 중요한 주제를 나타냅니다.</h1>

<h2>문서 내 2번째로 중요한 주제를 나타냅니다.</h2>

<h3>문서 내 3번째로 중요한 주제를 나타냅니다.</h3>

<h4>문서 내 4번째로 중요한 주제를 나타냅니다.</h4>

<h5>문서 내 5번째로 중요한 주제를 나타냅니다.</h5>

<h6>문서 내 6번째로 중요한 주제를 나타냅니다.</h6>


Divide

Divide 태그는 영역(섹션)을 나눌때 사용합니다.


사용 예)

<div>첫번째 섹션입니다.</div>

<div>두번째 섹션입니다.</div>


List

ol, ul, dl 총 3가지로 분류하며 원하는 기능에따라 다르게 사용합니다.

  • ol : 순서가 필요한 리스트에서 사용하며 li 태그로 리스트를 구분합니다. (계약서, 약관, 법조문 등)
  • ul : 순서가 필요없는 리스트에서 사용하며 li 태그로 리스트를 구분합니다. (메뉴판, 사이트 메뉴등)
  • dl : 단어 또는 사물등을 설명하는 리스트에서 사용하며 dt, dl 태그로 리스트를 구분합니다. (사전 등)

dt  : 단어 및 사물의 이름을 정의

dd : 단어 및 사물의 설명


사용 예)

<ol>

<li>제 1장 ...</li>

<li>제 2장 ...</li>

</ol>


<ul>

<li>삼겹살</li>

<li>목살</li>

</ul>


<dl>

<dt>사과</dt>

<dd>과일의 일종으로...</dd>

</dl>

Paragraph 

paragraph는 문단(문장)을 나눌때 사용합니다.


사용 예)

<p>p 태그는 문장을 나눌때 사용합니다.</p>

<p>이렇게 문장을 구분할때 사용합니다.</p>

Form

Form 태그는 사용자가 입력한 데이터를 서버로 전송하기 위해 사용합니다.

  • 데이터를 전송 할 위치를 지정하는 action 속성을 같이 사용해야합니다.
  • 데이터 전송 방법을 정하는 method속성도 같이 사용해야 합니다.
  • 전송방법에는 get 또는 post 방법이 있습니다. 
 

get 

post 

 

데이터를 URL에 추가하여 전송

HTTP요청 본문에 데이터를 추가 

 

URL의 길이는 300자 제한이 있음

크기 제한이 없음 

  북마크 지정 불가가능

북마크 지정 불가 

 

URL에 데이터가 그대로 표시됨(보안X)

데이터를 암호화 하여 전송 

  • Form 태그 안에서 사용되는 태그로는 fieldset(block), legend(inline) 태그가 있습니다.
  • fieldset 태그는 입력 양식 공간을 나눌때 사용합니다.
  • legend 태그는 fieldset 태그 안에 내용을 설명할때 사용합니다.

사용 예)

<form action="index.php" method="get">

    <fieldset>

        <legend>필수 입력 항목</legend>

    </fieldset>

    <fieldset>

        <legend>선택 입력 항목</legend>

    </fieldset>

</form>

Table

Table 태그는 표를 그리기 위한 태그로 thead, tbody, tfoot으로 구분하여 표현합니다.

크게 위의 3개로 구분을 한뒤 tr로 줄을 구분하고, th, td로 셀을 나누어 사용합니다.

  • thead : table의 제목역할을 하는 컬럼들의 집합입니다.
  • tbody : table의 내용역할을 하는 컬럼들의 집합입니다.
  • tfoot  : table의 내용을 정리하는 컬럼들의 집합입니다.
  • tr      : table의 줄을 나눌때 사용합니다.
  • th     : 셀의 주제를 나타낼때 사용합니다.
  • td     : 셀의 내용을 나타낼때 사용합니다.

사용 예)

<table>

    <thead>

        <tr>

            <th>주제1</th>

            <th>주제2</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>내용1</td>

            <td>내용2</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td>결과1</td>

            <td>결과2</td>

        </tr>

    </tfoot>

<table>

Adress

Adress 태그는 주소를 입력하기 위한 태그입니다.


사용 예)

<adress>서울 특별시 영등포구 여의도...</adress>



Blockqoute

인용구로 사용합니다.

 

사용 예)

<blockqoute>악법도 법이다. - 소크라테스 -</blockqoute>










+ Recent posts

티스토리툴바